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前 言 


本 书 适用 于 希望 学 习 HTML5 新 技术 以 及 Web 前 端 开发 人 员 , 也 可 用 于 高 校 数 字 
媒体 专业 ,动画 设计 专业 或 相关 专业 的 教材 。 本 书 不 要 求 读者 具有 编程 经 验 , 不 过 如 果 
有 具有 编程 基础 ,那么 会 对 本 书 内 容 更 容易 了 解 。 通 过 本 书 系统 的 学 习 , 读 者 可 以 掌握 
JavaScript 的 面向 对 象 技 术 .HTML5 的 图 形 功能 .动画 和 休闲 游戏 的 编程 及 开发 技术 。 

本 书 共 分 为 3 个 部 分 ,第 一 部 分 是 JavaScript 脚本 语言 的 基本 教程 ,在 该 部 分 集中 讲 
述 了 用 于 Web 网 页 开发 的 脚本 语言 JavaScript, 用 简明 通俗 的 语言 介绍 了 JavaScript 的 
面向 对 象 技术 ;第 二 部 分 讲解 了 HTML5 画布 的 基本 绘图 ,高 级 绘图 及 基于 引擎 的 绘图 
功能 ;第 三 部 分 则 以 动画 的 例 程 和 休闲 游戏 例 程 来 讲述 如 何 利用 原生 的 HTML5 画布 功 
能 设计 动画 与 休闲 游戏 的 开发 。 

第 一 部 分 

第 1 章 基本 概念 ”本 章 简单 介绍 了 HTML5 的 发 展现 状 ,并 且 演 示 了 搭建 开发 环境 

第 2 章 编程 基础 ”本 章 开 始 介绍 JavaScript 的 基本 语法 ,包括 变量 命名 .数据 类 型 
与 运算 符 的 作用 ,编程 的 书写 规范 。 读 者 可 以 了 解 到 JavaScript 与 C 语言 风格 的 相似 之 
处 与 不 同 点 ,并 为 之 后 的 学 习 打 好 基础 。 

第 3 章 基本 流程 控制 ”本 章 中 讲述 了 JavaScript 用 于 流程 控制 的 基本 语句 ,包括 顺 
序 语句 、 条 件 语句 和 判断 语句 。 

第 4 章 函数 ”本 章 中 ,读者 可 以 学 习 到 函数 的 定义 方法 ,函数 参数 和 返回 值 的 相关 
知识 ,读者 可 以 尝试 编写 一 个 函数 并 在 语句 中 调用 这 个 函数 。 

第 5 章 引用 类 型 ”本 章 介 绍 了 JavaScript 中 的 核心 类 型 , 即 引 用 类 型 。JavaScript 
是 一 种 基于 对 象 的 语言 ,因此 在 JavaScript 中 非常 多 的 概念 都 是 通过 一 个 对 象 来 实现 ,其 
至 连 函 数 也 是 一 个 对 象 。 读 者 可 以 从 本 章 学 习 到 JavaScript 中 的 内 置 对 象 以 及 访问 对 象 
的 属性 和 方法 。 

第 6 章 面向 对 象 编程 ”本章 中 介绍 了 如 何在 JavaScript 中 编写 面向 对 象 编程 的 代 
码 , 包 括 对 象 的 封装 .继承 和 多 态 的 实现 。 

第 二 部 分 

第 7 章 Canvas 基本 功能 “本章 中 介绍 了 画布 提供 的 基本 绘图 功能 ,读者 可 以 在 这 


I. 


TM 并 
章 中 学 到 如 何 利用 画布 提供 的 方法 来 实现 在 画布 上 下 文中 绘图 ,以 及 改变 绘图 属性 来 给 
制 不 同样 式 的 图 案 。 

第 8 章 Canvas 高 级 功能 ”本章 在 第 7 章 的 基础 上 ,更 深 一 层次 地 讲述 了 画布 提供 
的 高 级 绘图 功能 。 利 用 本 章 中 的 内 容 , 读 者 可 以 绘制 出 带 有 更 加 复杂 效果 的 图 案 。 

第 9 章 CVIDrawJS 绘图 部 分 ”本章 介绍 了 中 山大 学 自主 研制 的 CVIDrawJS 游戏 
引擎 绘图 部 分 的 功能 。( 通 过 面向 对 象 编程 把 绘图 方法 封装 在 对 象 之 中 ,) 使 得 开发 者 可 
以 方便 地 调用 绘图 对 象 的 方法 来 快速 绘图 。 

第 三 部 分 

第 10 章 预备 知识 ”本章 中 介绍 了 动画 的 形成 过 程 和 浏览 器 上 的 设备 响应 的 实现 。 
本 章 主要 是 为 第 11、12 章 的 内 容 做 基础 。 读 者 可 以 在 本 章 中 学 习 到 和 矩阵 变换 所 形成 的 
动画 和 精灵 动画 ,以 及 与 浏览 器 进行 交互 的 方法 。 

第 11 章 HTML5 动画 设计 本 章 以 一 个 鱼 游 动 动画 的 设计 为 主线 ,一 步 步 介 绍 了 
如 何 使 用 HTML5 的 原生 接口 进行 动画 的 设计 与 制作 。 读 者 可 以 学 到 简单 动画 的 设计 

第 12 章 HTML5 休闲 游戏 设计 本 章 介 绍 了 浏览 器 上 休闲 小 游戏 的 制作 过 程 。 其 
中 游戏 制作 的 过 程 从 简单 的 游戏 原型 开始 ,一 步 步 增添 功能 和 完善 游戏 ,带领 读者 了 解 
一 个 简单 的 休闲 游戏 制作 的 全 过 程 。 
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第 1 章 基本 概念。 用 


随 着 时 代 发 展 ,移动 性 和 跨 平台 性 成 为 当前 的 一 大 发 展 趋势 ,围绕 着 这 一 发 展 趋势 ， 
产生 了 许多 新 的 技术 。 其 中 ,基于 Web 浏览 器 的 HTMILS 技术 受到 了 广泛 关注 。 下 面 简 
单 介绍 HTMLS 的 特性 以 及 用 于 浏览 器 客户 端的 脚本 语言 JavaScript。 


1.1 了 解 HTMLS 


1.1.1 什么 是 HTML5 


HTML 是 Hypertext Markup Language 的 缩写 , 即 超 文 本 标记 语言 。 超 文本 标记 语言 
是 标准 通用 标记 语言 下 的 一 个 应 用 , 它 通 过 标记 符号 来 标记 要 显示 的 网 页 中 的 各 个 部 
分 ,告诉 浏览 器 如 何 显示 其 中 的 内 容 。 

HTML 标准 自发 布 以 后 ,相当 一 段 时 间 都 没有 推出 新 的 标准 。 各 家 浏览 器 厂商 为 了 
满足 日 益 增 长 的 网 站 应 用 功能 ,联合 部 分 公司 和 组 织 创建 新 的 标准 ,此 即 为 HTMLS 的 前 
身 。 提 出 草案 并 获得 万 维 网 联盟 (W3C ) 接纳 后 ,命名 为 HTMLS 新 标准 并 成 立 了 工作 团 
队 。 目 前 ,HTMLS 标准 还 在 不 断 发 展 并 完善 着 。 

目前 支持 HTMLS 的 浏览 器 包括 Firefox IE9 及 其 更 高 版 本 ,Chrome 、Safari .Opera 等 ， 
而 国内 的 傲游 浏览 器 ,以 及 基于 正 或 Chromium 所 推出 的 360 浏览 器 .搜狗 浏览 器 .QQ 
浏览 器 猎豹 浏览 器 等 浏览 器 同样 具备 支持 HTMLS 的 能 力 。 


1.1.2 HTMLS5 新 特性 
HTMLS 在 原先 DOM 的 基础 上 ,增加 了 多 样 化 的 API 函数 ,这 些 新 特性 让 Web 前 端 


开发 人 员 能 够 更 加 轻易 地 添加 很 多 炫 酷 的 网 页 效果 。 新 特性 包括 : 
学 ”用 于 绘画 的 canvas 元 素 


四 村 
TMI5 交 去 动 珊 基肥 雪 站 可 县 
学 ”用 于 媒介 回放 的 video 和 audio 元 素 

对 本 地 离线 存储 的 更 好 的 支持 
新 的 特殊 内 容 元 素 
新 的 表单 控件 

其 中 最 让 移动 端 广告 动画 及 游戏 开发 者 感 兴趣 的 就 是 HTML5 中 新 增 的 3 个 标签 ， 
分 别 是 < canvas > 、<video > 和 < audio > 标签。 虽然 支持 HITMILS 的 浏览 器 都 支持 这 三 
种 标签 ,但 是 由 于 图 片 音频 和 视频 的 格式 众多 ,并 不 是 每 个 浏览 器 都 能 支持 多 种 的 多 媒 
体格 式 。 


窜 


1.1.3 HTMLS5 发 展 趋势 


1. 移动 优先 

从 如 今 层出不穷 的 移动 应 用 就 知道 ,在 这 个 智能 手机 和 平板 电脑 大 爆炸 的 时 代 , 移 
动 优 先 已 成 发 展 趋势 ,不 管 开 发 应 用 还 是 游戏 ,都 必须 考虑 移动 设备 的 跨 平台 性 和 兼 
容 性 。 

2. 适合 游戏 开发 

由 于 HTMI5 的 跨 平台 性 ,一 次 开发 游戏 ,可 适应 不 同 的 平台 ,目前 游戏 开发 商都 愿 
意 用 HTMLS 来 开发 游戏 。 通 过 PhoneGap 及 appmobi 的 XDK 将 Web 游戏 应 用 打包 整合 
到 原生 应 用 中 也 是 一 种 应 用 方式 。 

3.2014 计划 

2012 年 9 月 ,万 维 网 联盟 (W3C ) 提出 计划 要 在 2014 年 年 底 前 发 布 一 个 HTML5 推荐 
标准 ,并 在 2016 年 年 底 前 发 布 HTML5. 1 推荐 标准 。 


1.2 了 解 JavaScript 


1.2.1 什么 是 JavaScript 


JavaScript 是 一 种 基于 对 象 和 事件 驱动 的 客户 端 脚本 语言 。 同 时 也 是 一 种 广泛 用 于 
客户 端 Web 开发 的 脚本 语言 ,常用 来 给 HTML 网 页 添加 动态 效果 和 处 理 交 互 逻辑 ,比如 
修改 文档 内 容 和 响应 用 户 的 交互 操作 。 

完整 的 JavaScript 实现 包含 三 个 部 分 : 


作 
人 


从 
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核心 (ECMAScript) 
文档 对 象 模型 ( DOM ) 
浏览 器 对 象 模 型 (BOM) 


JavaScript 


ECMAScript | DOM ] BOM 


图 1-1 JavaScript 组 成 


1.2.2 核心 (ECMAScript) 


ECMAScript 与 Web 浏览 器 并 没有 直接 的 依赖 关系 。ECMAScript 主要 向 JavaScript 
脚本 语言 提供 了 核心 类 型 和 基本 语法 ,以 下 是 ECMAScript 规定 的 内 容 。 


他 
他 
必 
他 
必 


他 


语法 

类 型 

语句 
关键 字 ,保留 字 
操作 符 

对 象 


学 习 JavaScript 的 过 程 其 实 就 是 先 学 习 ECMAScript 提供 的 基本 语法 和 语句 ,因此 有 
时 JavaScript 和 ECMAScript 被 误 以 为 是 相同 的 含义 。 


1.2.3 文档 对 象 模型 (DOM) 


文档 对 象 模型 (DOM) 是 一 种 用 于 HTML 和 XML 文档 的 编程 接口 。DOM 为 一 个 多 
层 节 点 结构 。HTML 或 XML 页 面 中 的 每 个 组 成 部 分 都 是 某 种 类 型 的 节点 ,而 这 些 节 点 又 
包含 着 不 同类 型 的 数据 。 通 过 DOM 可 以 动态 地 访问 程序 和 脚本 ,更 新 其 内 容 、 结 构 和 
WWW 文档 的 风格 。 文 档 可 以 进一步 被 处 理 ,处 理 的 结果 可 以 加 入 到 当前 的 页 面 。 

DOM 是 一 种 基于 树 的 API 文档 , 它 要 求 在 处 理 过程 中 整个 文档 都 表示 在 存储 器 中 ， 
如 图 1 -2 所 示 。 
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根 元 素 


<html> 


元 素 元 素 
<head> <body> 
元 素 元 素 元 素 | 元 素 
<title> 了 i 
文本 文本 文本 
“文档 标题 ” “标题 ” “内 容 ” 


图 1-2 文档 对 象 模型 


其 对 应 的 HTML 编码 如 下 。 
<HTML > 
<head > 

<title > 文档 标题 < /title > 
</head > 
<body > 

<hl > 标题 </hl > 

<p> 内 容 >/p> 


</body > 
</HTML > 
文档 树 中 的 每 一 个 节点 都 包含 在 父 节 点 之 中 ,并 且 每 一 个 节点 都 有 自己 的 属性 和 文 
本 内 容 。 每 个 节点 都 可 以 看 作 是 一 个 对 象 ,因此 能 够 如 操作 对 象 一 样 调用 文档 对 象 模型 
中 的 方法 ,其 中 文档 对 象 document 中 较 常 用 的 方法 如 表 1 -1 所 示 。 
表 1 -1 document 对 象 中 的 常用 方法 


document 方法 方法 说 明 
write( ) 向 文档 写 入 HTML 代码 文本 
writeln( ) 与 方法 write( ) 类 似 ,不 过 会 自动 在 最 后 多 写 一 个 换行 符 
根据 参数 中 指定 的 标签 名 tag 创建 一 个 元 素 节 点 对 象 ,并 且 返 回 


createElement( tag) 


该 对 象 的 引用 
通过 参数 id 的 值 来 获取 具有 对 应 id 属性 的 元 素 对 象 的 引用 ,这 
个 方法 返回 第 一 个 具有 id 属性 的 对 象 


getElementById(id) 
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document 方法 方法 说 明 
getElementsByName(name) 获取 具有 指定 name 属性 值 的 所 有 元 素 对 象 的 集合 
getElementsByTagName( tag) 获取 具有 标签 名 为 tag 的 所 有 元 素 对 象 的 集合 


1.2.4 浏览 器 对 象 模型 ( BOM ) 


浏览 器 对 象 模型 提供 给 开发 者 操控 浏览 器 窗口 的 功能 ,开发 人 员 可 以 通过 使 用 
BOM ,移动 窗口 ,更改 状态 栏 文本 ,执行 其 他 不 与 页 面 内 容 发 生 直接 联系 的 操作 。 

由 于 BOM 没有 相关 标准 ,每 个 浏览 器 都 有 自己 对 BOM 的 实现 方式 。BOM 有 窗口 对 
象 .导航 对 象 等 一 些 实际 上 已 经 默认 的 标准 ,但 对 于 这 些 对 象 和 其 他 一 些 对 象 ,每 个 浏览 
器 都 定义 了 自己 的 属性 和 方式 。 

在 BOM 对 象 模 型 中 ,窗口 对 象 ( window ) 位 于 顶部 ,表示 浏览 器 的 窗口 ,其 中 有 如 下 
常用 方法 ,如 表 1 -2 所 示 。 

表 1-2 window 对 象 中 的 常用 方法 
window 方法 方法 说 明 

弹出 警示 窗口 ,message 参数 为 警示 内 容 。 这 个 方法 经 常用 于 调 
试 过 程 中 检查 变量 值 和 检测 是 否 经 过 某 一 流程 
设置 一 个 延 时 器 ,在 指定 time 时 间 经 过 后 自动 执行 一 次 callback 
setTimeout( callback, time) 中 的 代码 内 容 ,time 时 间 的 单位 是 毫秒 。 该 方法 返回 一 个 延 时 器 
ID ,用 于 方法 clearTimeout( ) 


alert( message) 


设置 一 个 定时 器 ,每 隔 指定 的 时 间 time 后 执行 一 次 callback 中 的 
setInterval( callback, time) 代码 内 容 ,time 时 间 的 单位 是 毫秒。 该 方法 返回 一 个 定时 器 人 D， 


用 于 方法 clearInterval( ) 
clearTimeout( timerID) 根据 给 定 的 延 时 器 timerID 取消 延 时 操作 
clearInterval( timerID ) 根据 给 定 的 定时 器 timerID 取消 定时 操作 


1.3 搭建 开发 环境 


对 于 简单 的 代码 输入 和 运行 ,只 需要 一 个 文本 编辑 器 和 支持 HTMLS 的 浏览 器 就 足 
够 了 。 但 是 为 了 便于 调试 代码 ,提高 开发 效率 ,非常 有 必要 使 用 一 套用 于 代码 编辑 并 且 
Ee 
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调试 代码 的 集成 开发 工具 IDE( Integrated Development Environment) ,下面 开始 讲解 开发 
环境 的 搭建 。 


1.3.1 开发 环境 介绍 


开发 过 程 一 般 只 需要 用 到 两 款 软件 ,分 别 是 : 

学 ”代码 编辑 器 :用 于 编写 修改 页 面 代 码 ,并 保存 于 文件 中 。 

学 ”浏览 器 :主要 用 于 查看 代码 运行 效果 ,并 且 调试 代码 ,设置 断 点 等 如 其 他 IDE 的 
调试 功能 。 

代码 编辑 器 的 要 求 是 能 够 编写 文本 即 可 ,所 以 只 要 用 操作 系统 中 自 带 的 纯 文本 编辑 
器 即 可 以 编写 出 页 面 代 码 。 但 是 纯 文 本 编辑 器 对 开发 者 要 求 较 高 ,开发 者 需要 熟 记 开 发 
语言 并 小 心 语法 问题 。 因 此 为 了 提高 代码 编写 效率 ,建议 选用 一 套 IDE 来 编写 代码 ,大 
多 数 IDE 有 代码 提示 功能 和 实时 语法 错误 检测 ,可 以 方便 地 在 编写 过 程 中 修正 语法 
错误 。 

由 于 HTMLS 标准 还 在 进一步 的 发 展 当 中 ,所 以 并 不 是 所 有 的 浏览 器 都 能 够 很 好 地 
支持 HTMLS 的 运行 (如 低 版 本 的 正 ) ,在 开发 过 程 中 需要 确保 选用 的 浏览 器 能 够 支持 
HTMLS 的 运行 。 通 常情 况 下 ,为 了 开发 出 具有 跨 浏览 器 和 兼容 性 的 网 页 ,可 能 还 需要 同 
时 安装 多 款 浏览 器 。 

那么 有 哪 几 款 浏览 器 支持 HTML5 呢 ? 值得 庆幸 的 一 点 是 当前 各 大 主流 浏览 器 都 能 
够 支持 HTMLS 的 运行 ,目前 来 说 Chrome .Opera .Firefox ,Safari 和 IE 等 其 他 浏览 器 都 支持 
HTMLS 的 新 特性 ,但 是 支持 度 各 不 相同 。 不 过 随 着 HTMLS 的 正式 标准 发 布 ,不 同 浏览 器 
对 HTMLS 的 支持 度 将 会 得 到 提高 。 


1.3.2 代码 编辑 器 


1. Nodepad + + 

Notepad + + 是 一 款 免 费 的 开源 代码 编辑 器 ,运行 界面 如 图 1 -3 所 示 , 由 C + + 代码 
编写 而 成 。 这 款 软件 短小 精 悍 ,可 以 满足 平常 学 习 和 代码 编写 的 任务 ,以 下 列 出 了 这 款 
编辑 器 的 特性 。 

学 ”内 置 支 持 多 达 27 种 语法 高 亮度 显示 ,包括 常见 的 源 代 码 和 脚本 语言 ,例如 
C+ + Java ,JavaScript 和 HTML 等 。 

党 ”可 自动 检测 文件 类 型 ,根据 关键 字 显 示 节 点 ,节点 可 自由 折 笃 /打开 ,代码 显示 
得 非常 有 层次 感 , 这 是 此 软件 最 具 特 色 的 体现 之 一 。 

a 


学 ”可 打开 双 窗 口 ,在 分 窗口 中 又 可 打开 多 个 子 窗口 ,人 允许 快捷 切换 全 屏 显 示 模 式 
(F11 ) ,支持 鼠标 滚轮 改变 文档 显示 比例 等 。 


Bi Di\examplel_2.html - Notepad++ [Administrator] 
文件 月 “编辑 (6) 搜索 (5) 视图 (V) 格式 (M) 语言 (1) 设置 (1) 宏 (O) 运行 (R) 播 件 (P) 窗口 (W) 了 
;i o 思 目 六 名 训 合 | 者 网 有 |B CC| 的 与 | * 必 | 己 忆 | 寺 1 国 品 国 且 | 日 回 呈 加 昌 ” 


目 examplel_2 bts 
钙 pocryPE BTMIS 
<html> 
<head> 
<title> 在 BTML 中 使 用 Javascript</titie> 
<meta charset="UTF-8"/> 
</head> 
<body> 
<script type="text/javasoript" src-"examplel 2.j8"></script> 
</body> 
</html> 


口 omwvamwomwwnrP 


UTF-8 w/o BOM INS 


H length : 202 lines : 10 tn:5 Col:28 Sel:0|0 
- 一 一 一 一 - 一 一 


Dos\Windows 
1-3 Nodepad + + 界面 


可 见 图 1 -3 中 软件 界面 非常 整洁 ,使 用 速度 快 ,可 以 满足 个 人 的 代码 编写 需要 。 

在 初次 使 用 这 款 软件 时 ,可 以 调整 默认 设置 来 符合 代码 编写 的 要 求 。 

党 ”设置 语言 

由 于 Nodepad + + 支持 多 种 语言 ,因此 在 正式 编写 代码 前 需要 选 定 开发 时 的 语言 环 
境 ,以 激活 Nodepad + + 软件 的 语言 高 亮 显 示 和 语法 检测 。 

选中 “语言 "菜单 栏 ,如 图 1 -4 所 示 。 可 以 看 到 支持 的 语言 种 类 非常 多 ,假如 要 编写 
HTML 文档 ,那么 就 选择 “H" 字 母 下 的 “HTML”。 选 中 后 ,代码 编辑 区 中 的 相应 HTML 代码 
便 会 有 高 亮 显示 。 假 如 要 编写 JavaScript 脚本 语言 ,那么 就 选中 "了 本 字母 中 的 “JavaScript”。 


Li Dr 

| 长 OECD [王者 (0 |] 设置 () 播 件 (P) 窗口 W) ? x 
o 轨 目 忆 5 全 | 水 了 入 | 9 * 虹 |= 4 国 研 国有 | 回回 四 四 局” 

有 EEC 


<ricle> 在 HTML 中 使 用 Jal 
<neta charset-"UTP-O"/, 


pt type="text/jay 


学 ”代码 自动 提示 

代码 自动 提示 功能 可 以 为 开发 人 员 提 供 非常 大 的 方便 ,有 助 于 开发 人 员 节省 代码 编 
写 时 间 ,并 且 降 低 输入 错误 代码 的 概率 。 

选中 “设置 "菜单 栏 ,再 点 击 “ 首选 项 "打开 软件 的 设置 界面 ,如 图 1 -5 所 示 。 


indexhtml - Notepad+ + [Administrator 2 | 


一 
格式 (M) 语言 () [设置 四] 实 (Q) 运行 (R) 播 件 P) 窗 DW) 2 
1 和 | 3 €| 


tle> 
w="Content-TypE 


图 1-5 首选 项 菜单 


在 弹出 的 设置 栏 中 ,如 图 1 -6 所 示 , 选 择 “ 自动 完成 "一 栏 ,并 且 可 以 按照 下 图 在 相 
应 的 选项 前 打 “V” ,以 激活 自动 完成 功能 和 符号 的 自动 插入 功能 。 


下 项 加 
bi 自动 完成 
回 所 有 输入 均 白 用 自动 成 从 第 1 个 字符 开始 
i 而 国教 自动 成 P19 
关联 D 单 油 自动 寺 所 
辐 输入 时 提示 巴 数 瑚 扫 
netance uneert 
opm cose 
和 固 ( 国 Matched pay 1: 
加 0 。 图” Motched por 2 
| 国 (} 加 belo doce tag Motched par 3 
Ca 


1-6 自动 完成 选项 


以 上 设置 都 是 基于 个 人 习惯 而 设置 的 ,编写 代码 当然 最 好 是 要 符合 开发 者 的 习惯 。 
调整 好 软件 设置 以 后 , 便 可 以 开始 编写 代码 。 

党 ”运行 代码 

编写 好 代码 ,检测 没有 语法 错误 后 ,就 可 以 用 浏览 器 打开 所 编写 的 HTML 文档 来 检 
查 其 运行 效果 了 。 

首先 ,最 基本 的 方法 当然 是 直接 双击 HTML 文件 来 用 默认 的 浏览 器 打开 并 运行 ,或 
者 把 HTML 文件 拉 进 到 浏览 器 中 打开 。 而 Nodepad + + 还 提供 了 另外 的 方法 来 运行 HT- 
ML 文档。 

在 菜单 栏 中 可 以 发 现 有 “运行 "菜单 ,选中 后 可 以 看 到 Nodepad + + 提供 了 4 种 主流 
的 浏览 器 来 运行 HTML 文件 ,如 图 1 -7 所 示 。 


a 


设置 穴 (O) [有 辐 | 基 作 D， 音 DOW 2 x 
1 知 | 记忆 中 运行 (R).. F5 
| Launch in Firefox Cul+Alt+Shift+X 
| Launchin1E Corl+Ak+ Shift+1 
| launch in Chrome Cul+Alt+ Shift+R 
| Leunch in Safari Cerl+Alt+ Shift+F 
vew content=| 。 Get php help Ah+F1 
Google Search Al+F2 
Wikipedia Search Alt+F3 
| 人 fie ArF5 
| Open in another instance Alt+F6 
| C+Alt+Shift+O 


1-7 代码 运行 


点 击 相应 的 浏览 器 后 ,如果 是 第 一 次 使 用 该 浏览 器 运行 ,那么 会 耗费 一 段 时 间 寻 找 
该 浏览 器 位 置 来 打开 运行 。 

2. Dreamweaver 

Adobe Dreamweaver ,简称 "DW”, 是 美国 MACROMEDIA 公司 开发 的 集 网 页 制作 和 网 
站 管理 于 一 身 的 所 见 即 所 得 网 页 编辑 器 , 它 是 一 套 针 对 专业 网 页 设计 师 特别 定制 的 可 视 
化 网 页 开发 工具 ,利用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 跨越 浏览 器 限制 的 充满 
动感 的 网 页 。 如 图 1 -8 中 为 Dreamweaver 界面 。 


DW xf#In oa mv MA We KlO) std EAS) OW wm, | 国 ” OO- A RHd ，[ 王 配 二 
Fre 
| 2] 二 

-| 


1-8 Dreamweaver 界面 


可 以 看 出 窗口 中 央 有 两 个 空白 区 ,左边 区 域 是 代码 编辑 区 , 而 右边 的 区 域 是 实时 的 
页 面 显示 区 , 即 输入 的 代码 能 够 实时 地 把 效果 显示 在 显示 区 中 ,方便 开发 者 观察 代码 运 
行 效 果 。 并 且 Dreamweaver 还 提供 了 非常 庞大 的 功能 ,为 一 些 企业 级 的 开发 工程 提供 了 
很 大 的 方便 。 但 是 Dreamweaver 是 一 款 收费 软件 ,首次 下 载 后 有 30 天 的 试用 期 限 。 

Dreamweaver 创建 相应 的 HTML 文件 或 JavaScript 脚本 文件 后 , 便 可 以 自动 识别 语言 

a 


并 进行 语法 错误 检测 。 在 编写 完 HTML 文档 后 ,可 以 直接 在 实时 显示 区 中 观察 效果 ,也 
可 用 浏览 器 打开 观察 效果 。 选 中 中 央 较 上 方 的 “地球 " 状 图 标 ,选中 相应 的 浏览 器 , 即 可 
打开 HTML 文档 ,如 图 1-9 所 示 。 


播 和 D 修改 (M) ”格式 [0) 命令 (OQ 站 点 (S) 窗口 (W) 帮助 (H) | 国 ” 人心 品 v 
1 htm 


,到 刘 | 视 图 | 栓 二 | 加.|@. C 是 到 区 


Witledl htnl 天 在 chrome Pl2 
了 SEE Firefox 
预 光 在 IExplore 

ea WE Device Central Cl+Ak+F12 
WE Adobe Browserlab CcCtl+Shift+F12 


tf-8" /> 


入 名 浏览 器 列表 (E).… 


t/javascript” src= 
ipt: 


1-9 代码 运行 


1.3.3 浏览 器 


只 要 选 一 款 支 持 HTMLS 的 浏览 器 就 可 以 ,在 本 书 中 选用 的 是 Google Chrome 浏览 器 
和 FireFox 浏览 器 ,演示 怎样 使 用 这 两 款 浏览 器 来 调试 代码 。 


1. Google Chrome 浏览 器 调试 
在 最 新 版 的 Google Chrome 浏览 器 中 ,看 到 右上 和 角 的 菜单 按钮 ,点 击 并 弹出 主 菜单 ， 


这 时 候选 择 “ 工 具 ” ,并 在 弹出 的 子 菜单 中 选择 “开发 者 工具 ” ,如 图 1 - 10 所 示 。 


DD sboutblank 
€ CIDaboutbank 


全 0 
广汉 光 下- 

报告 同时 8)-- 

3 » 关于 Google ChromeG) 
下 看 源 代 三 (O) on 3] 
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1 -10 Google 浏览 器 菜单 


a 
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单 击 后 ,在 浏览 器 下 方便 会 弹出 开发 者 的 调试 区 ,一般 情况 下 只 需要 关注 “Sources” 
和 “Console” 两 栏 就 可 以 。 在 “Sources” 中 可 以 看 到 网 页 中 加 载 的 脚本 文件 和 HTML 文 
档 , 打 开 其 中 脚本 文件 ,可 以 看 到 里 面 的 源 代 码 。 此 时 只 要 在 代码 的 行 号 上 单 击 鼠标 , 便 
可 以 在 相应 的 行 中 设置 端点 ,刷新 页 面 重新 运行 后 便 能 看 到 网 页 运行 到 断 点 处 即 停止 运 
行 ,通过 设置 断 点 来 调试 代码 。 如 图 1 -11 所 示 。 


Elements Resources Network [Sources| Timeline Profiles Audits Console x 
四 heojsx 加 川 b mA + + 办 
1 Function hello() { * Watch Expressions + e 
2 alert("Hello!"); v Call Stack 
3 - 
4 hello()i| 了 Scope Variables 
v Breakpoints 
No Breokpoints 
» DOM Breakpoints 
> XHR Breakpoints + 
» Event Listener Breakpoints 
» Workers 
ODO, a © () line4coumn9 交 
1-11 源 代码 


另外 一 处 便 是 “Console” 一 栏 ,这 个 是 控制 台 信 息 , 如 果 在 代码 中 输出 了 控制 台 信 息 ， 
便 可 以 在 此 处 看 到 输出 信息 。 要 善 用 控制 台 的 输出 信息 ,因为 里 面包 含 了 许多 错误 提示 
语句 ,方便 开发 人 员 调 试 代码 与 查 错 。 

2. FireFox 浏览 器 

在 最 新 版 的 FireFox 浏览 器 中 , 先 看 到 左上 角 的 菜单 按钮 ,点 击 并 弹出 主 菜单 ,这 时 
”, 如 图 1 -12 所 示 。 


1-12 FireFox 菜单 栏 


在 弹出 的 调试 栏目 中 ,可 以 看 到 同样 有 控制 台 和 调试 器 如 图 1 - 13 所 示 , 其 中 控制 

台 可 以 看 到 代码 中 输出 到 控制 台 的 信息 ,调试 器 中 可 以 设置 断 点 ,设置 方法 一 样 , 在 相应 

的 行 号 中 单 击 鼠 标 即 可 。 其 他 的 比如 查看 器 可 以 查看 当前 网 页 的 HTML 文档 代码 ,浏览 
a 
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器 还 提供 了 更 多 的 调试 功能 方便 开发 人 员 调 试 程序 。 
准备 好 开发 环境 后 , 接 下 来 便 可 以 开始 编写 HTML 文档 和 JavaSeript 脚本 代码 。 


1 function hello() { 
alert( ‘Hello!"); 
} 
4 hello(); 


图 1-13 FireFox 调试 


1.4 在 HTML 文档 中 使 用 JavaScript 


在 开发 交互 的 Web 页 面 开 发 过 程 中 ,需要 在 网 页 文档 中 引入 JavaScript 脚本 语言 ,此 
时 可 以 把 JavaScript 代码 舱 入 到 HTML 文档 中 。 在 HTML 文档 中 引入 JavaScript 代码 有 
两 种 方法 :一 种 是 在 文档 中 直接 财 入 JavaScript 脚本 语言 ; 另 一 种 是 将 JavaScript 脚本 文件 
艇 人 HTML 文档 中 。 


1.4.1 新 建 HTML 文档 


下 面 利用 搭建 好 的 开发 环境 来 新 建 一 个 HTML 文档 并 加 入 代码 。 


第 一 步 , 点 击 “ 文 件 " 菜 单 栏 , 并 在 弹出 的 菜单 中 选择 “新 建 " ,可 见 新 建 了 一 个 空白 
文档 ;第 二 步 , 点 击 “ 语 言 "菜单 栏 ,选择 语言 +HTML” ,并 且 将 这 个 新 建 的 文档 保存 为 
“HelloWorld. html” ,并 在 代码 编辑 区 中 输入 以 下 代码 ,如 代码 清单 1 -1 所 示 。 

代码 清单 ”1 -1 

<!DOCTYPE HTML > 

<HTML > 

<head > 


<title > 测试 < /title > 

<meta charset ="UTF -8"/ > 
</head> 
<body > 


Es 
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<h1 > Hello World! </h1 > 


</body > 
</HTIML > 


其 中 <! DOCTYPE HTML > 表示 的 是 HTMLS 的 文档 模式 ,浏览 器 接收 到 这 个 信息 
后 在 解析 文档 上 的 行为 会 有 不 同 的 差异 ,既然 要 开发 HTML5 ,所 以 预先 声明 为 HTMLS 文 
档 模 式 。 

参考 图 1 -2 可 知 ,文档 接 下 来 的 是 根 元 素 < HTML > ,文档 树 的 第 一 个 节点 是 < 
head > 元素 ,里面 包含 了 元 素 <title > 和 < meta > 。 其 中 < title > 元 素 指明 页 面 在 浏览 器 
标签 页 上 的 标题 ,< meta > 提供 页 面 的 元 信息 ,charset 属性 表明 文档 的 字符 编码 ,采用 
UTF -8 的 编码 方式 来 解析 文档 内 容 , 否 则 ,编码 方式 不 对 就 会 显示 乱码 。 还 有 另外 一 个 
节点 < body > ,在 这 元 素 间 添加 < hl > 元素 ,并 输入 内 容 “Hello World!1”。 

第 三 步 ,点 击 “ 运 行 "菜单 栏 ,并 选择 用 Google 浏览 器 打开 HTML 文档 。 可 以 看 到 运 
行 效果 如 图 1 -14 所 示 : 


) D ws x 


” 会 CD fileVL/ 公 选课 / 公 加 灾 三 


Hello World'! 


1-14 运行 效果 


1.4.2 直接 骨 入 JavaScript 


在 HTML 文档 中 嵌入 JavaScript 的 方法 就 是 使 用 < script > 元 素 , 其 中 < script > 元 素 
有 属性 type, 表 示 编 写 代 码 使 用 的 脚本 语言 的 内 容 类 型 ,最 大 限度 地 考虑 到 浏览 器 兼容 
性 ,可 以 设置 成 texVjavascript。 不 过 ,这 个 属性 不 是 必需 的 ,忽略 这 个 属性 值 的 情况 下 默 
认 是 text/ javascript。 
基于 这 个 标签 ,可 以 在 HTML 文档 的 < body > </body > 元 素 间 使 用 < script > 元 素 
藤 入 JavaScript 脚本 语言 ,实现 如 代码 清单 1 -2 所 示 。 
代码 清单 ”1 -2 


<!DOCTYPE HTML > 


15. 


<HTML > 


<head > 
<title > 在 HTML 中 使 用 JavaScript < /title > 
<meta charset ="UTF -8"/ > 
<body> 
< script type = " text/javascript" > 
function sayHello() { 
alert(" Hello World! " ); 
} 
sayHello( ); 
</script > 
</body > 
</HTML > 


代码 清单 中 的 其 他 部 分 都 是 HTML 文档 的 内 容 ,而 在 <body > </body > 元 素 引 入 了 
<script > 元素, 并 在 < script > </script > 元 素 之 间 代 码 就 是 嵌入 的 JavaScript 代码 。 
Script type = "text/javascript" > 
function sayHello() { 
alert(" Hello World! " ); 
} 
sayHello( ); 
</script > 
其 中 type 属性 标明 了 元 素 间 嵌入 的 脚本 类 型 是 JavaSeript 语言 。 
在 脚本 语言 中 , 先 定义 了 一 个 名 叫 “sayHello" 的 函数 ,函数 中 调用 alert 函数 在 浏览 器 
上 输出 一 条 提醒 信息 ,信息 内 容 为 “Hello World!1”。 在 定义 完 函 数 之 后 ,在 下 面 调用 say- 
Hello 函数 ,运行 HTML 文档 后 可 见 浏览 器 弹出 提醒 信息 ,如 图 1 -15 所 示 。 


癌 在 HTML 中 使 用 Javascrip x 最 
-全 CD file/WL/ 公 选课 / 公 选 课 教材 /@ 实 三 


天 


JavaScript 提醒 


Hello World! 


1-1s5 提醒 信息 
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1.4.3 藤 入 JavaScript 脚本 文件 


当 需 要 用 到 的 脚本 语言 数量 庞大 的 时 候 , 把 所 有 代码 都 放 在 HTML 文档 中 不 便于 管 
理 。 因 此 通常 情况 下 ,可 以 把 脚本 语言 单独 放 在 一 个 脚本 文件 中 ,之 后 在 HTML 文档 中 
加 载 这 个 脚本 文件 。 

<script > 元 素 中 还 有 ”sre" 属 性 ,表示 元 素 包 含 要 执行 的 代码 的 外 部 文件 ,利用 该 属 
性 可 以 指定 需要 引入 的 JavaSeript 脚本 文件 ,HTML 文档 打开 以 后 便 会 加 载 文件 中 的 脚本 
语言 并 执行 。 

新 建 JavaScript 脚本 文件 ,后 级 名 为 “js” ,命名 为 “hello. js” ,并 输入 代码 清单 中 的 内 
容 , 如 代码 清单 1 -3 所 示 。 

代码 清单 ”1 -3 


function sayHello() { 
alert(" Hello World! " ); 


} 
sayHello( ); 


修改 HTML 文档 中 的 < script > 元 素 ,实现 如 代码 清单 1 -4 所 示 。 
代码 清单 ”1 -4 


<!DOCTYPE HTML > 
<HTML > 
<head > 
<title > 在 HTML 中 使 用 JavaScript < /title > 
<meta charset ="UTF -8"/ > 
<body > 
< Script type = "textjavascript”src = " hello. js”> </script > 
</body > 
</HTML > 


相应 的 元 素 内 容 改 为 script type = " text/javascript" src ="hello. js" > </script > , 即 
在 <script > 元 素 中 添加 了 src 属性 并 指向 外 部 脚本 文件 “hello. js” ,运行 后 可 以 看 到 显示 
效果 同 代码 1 -2 运行 一 致 。 


Pb 
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1.5 小结 


本 章 介绍 了 HTMI5 的 由 来 以 及 新 特性 ,包括 : 
用 于 绘画 的 canvas 标签 
用 于 媒介 回放 的 video 和 audio 标签 
对 本 地 离线 存储 的 更 好 的 支持 
新 的 特殊 内 容 元 素 
新 的 表单 控件 

其 中 最 引 人 注 目的 标签 就 是 < canvas > 、<video > 和 < audio > 标签 。 

接 下 来 介绍 了 JavaScript 的 组 成 部 分 ,包含 : 

学 ”核心 (ECMAScript) 

学 ”文档 对 象 模型 (DOM) 

学 ”浏览 器 对 象 模型 (BOM) 

ECMAScript 主要 涵 括 了 JavaScript 中 的 基本 语法 和 数据 类 型 。DOM 模型 主要 为 开 
发 者 提供 了 一 种 处 理 网 页 文档 的 方式 , 它 是 一 种 基于 树 的 多 层 节点 结构 。BOM 模型 给 开 
发 者 提供 了 一 种 控制 浏览 器 的 方法 ,其 具体 的 操作 方式 有 别 于 不 同 的 浏览 器 。 

接 下 来 讲解 开发 环境 的 搭建 步骤 ,并 介绍 了 两 款 代 码 编辑 器 的 使 用 。 运 行 代码 只 要 
使 用 能 够 支持 HTMLS 的 浏览 器 即 可 ,没有 特别 要 求 。 本 书 演示 了 在 Google 浏览 器 和 
FireFox 的 浏览 器 下 调试 基本 步骤 。 


他 


党 


1.6 习题 


1. 试 写 出 3 种 HTML5 中 新 增 的 标签 元 素 。 


2. 完整 的 JavaScript 有 三 个 部 分 ,包括 : i 和 入 
3. 文 档 对 象 模型 (DOM) 是 一 个 结构 。 

4. 以 下 哪 种 工具 不 是 Web 浏览 器 ? 

A.IE 

B. Firefox 

C. Chrome 

D. Word 
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5. 以 下 哪个 标签 用 于 在 HTML 文档 中 嵌入 JavaScript 脚本 ? 
A. <canvas > 

B. < script > 

C. <video > 

D. <audio > 


6. 在 电脑 上 搭建 开发 环境 ,选择 一 款 代 码 编辑 器 和 浏览 器 ,按照 教材 中 的 教程 安装 
并 编写 HTML 文档 。 
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在 这 一 章 中 将 要 介绍 JavaScript 中 的 数据 类 型 ,变量 和 运算 符 等 基本 语法 ,有 过 C 语 
言 风 格 编程 基础 的 读者 会 非常 迅速 地 学 习 JavaScript 语法 ,因为 ECMAScript 语法 大 量 借 
鉴 了 C 语言 的 语法 。 


2.1 编程 规范 


2.1.1 注释 


和 C 语言 风格 的 注释 方法 一 样 ,JavaScript 也 有 两 种 注释 方法 ,分 别 是 单行 注释 和 多 
行 注 释 ,浏览 器 对 JavaScript 中 的 注释 内 容 不 做 解释 。 

党 ”单行 注释 

单行 注释 用 两 个 连续 斜 枉 (//) 表示 ,注意 两 斜 杠 间 不 能 有 空格 。 斜 杠 后 的 一 行内 容 
都 表示 注释 ,不 会 被 解析 到 运行 结果 中 。 

党 “多 行 注释 

单行 注释 用 斜 枉 和 星 号 来 表示 ,其 中 先 斜 杠 后 星 号 (/ * ) 表 示 注 释 的 开头 , 先 星 号 后 
斜 杠 ( */) 表 示 注 释 的 结束 ,而 在 之 中 的 所 有 代码 都 被 当 作 注释 ,多 行 注释 不 能 嵌 套 使 
用 ,如 下 所 示 : 

/* 这 里 是 多 行 注释 

所 有 代码 都 不 会 解析 。 * / 


2.1.2 命名 规范 
JavaScript 允许 设置 任意 符合 规定 的 标识 符 名 字 。 本 书 建议 变量 名 选择 易于 记忆 , 具 


有 可 读 性 的 名 字 ,保持 代码 清晰 的 良好 风格 。 如 果 变 量 用 于 保存 一 个 姓名 ,那么 变量 名 
. 20 . 
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可 命名 为 name, 表 示 年 龄 的 变量 名 就 可 命名 为 age。 

如 果 遇 到 了 多 个 字母 的 标识 符 , 可 以 选择 缩写 的 方法 并 注释 起 来 ,或 者 采用 驼峰 式 
的 大 小 写 格式 , 即 第 一 个 字母 小 写 ,而 接 在 一 起 的 第 二 个 单词 的 首 字 母 大 写 , 例 如 :stu- 
dentName \teacherAge 等 。 这 样 使 代码 的 可 读 性 有 明显 的 提升 。 


2.2 变量 


变量 是 程序 中 的 一 个 已 命名 的 存储 单位 , 即 用 一 个 变量 名 代表 一 个 变量 值 ,变量 的 
值 可 以 通过 赋值 发 生变 化 。 但 是 在 JavaScript 中 ,对 于 基本 数据 类 型 和 引用 类 型 ,变量 的 
行为 差异 较 大 ,因此 对 于 变量 所 赋予 值 的 类 型 要 慎重 。 


2.2.1 变量 命名 


在 JavaScript 中 ,变量 名 都 是 一 种 标识 符 , 所 谓 的 标识 符 其 实 就 是 指 变量 函数 或 者 
属性 的 名 字 ,这 些 命名 都 要 符合 以 下 规则 : 

党 ”区 分 大 小 写 

一 切 的 标识 符 都 是 区 分 大 小 写 的 ,只 要 内 含 的 字母 中 有 不 同 的 大 小 写 ,那么 标识 符 
就 会 被 认定 为 不 同 的 名 字 , 即 name 和 Name 是 不 同 的 变量 名 。 

学 “字符 规定 

并 不 是 所 有 的 字符 都 能 用 来 作为 标识 符 名 字 ,在 JavaScript 语言 中 ,只 有 字母 、 下 划 
线 (_) .美元 符号 ( $ ) 和 数字 能 被 包含 在 标识 符 中 ,其 他 都 作为 不 合法 名 字 。 并 且 规定 
了 标识 符 的 第 一 个 字符 必须 是 字母 .下 划 线 或 者 是 美元 符号 , 即 不 能 以 数字 作为 首 字符 。 

例如 abc 、$ name 、agel8 都 是 合法 标识 符 , 但 是 123 、#name、+ age 就 是 不 合法 字 
符 了 。 

学 ”不 能 用 关键 字 

规定 标示 符 不 能 使 用 JavaScript 中 的 保留 字 和 关键 字 作 为 标识 符 。 以 下 列 出 JavaS- 


cript 中 的 关键 字 : 
break do instanceof typeof case else new var 
catch finally return void continue for switch while 
debugger function this with default 让 throw delete 
in try 


4 


全 - HTML5 交 互动 画 开发 实践 教程 “站 


2.2.2 变量 声明 和 赋值 


注意 在 JavaScript 中 变量 都 是 弱 类 型 , 即 变量 没有 特定 的 类 型 值 ,因此 声明 一 个 变量 
都 是 使 用 " var" 关键 字 。 

var name; 

也 可 以 在 一 个 var 下 同时 声明 多 个 变量 ,变量 间 用 逗号 分 隔 。 

var name, age, weight; 

声明 一 个 变量 后 ,由 于 还 没有 赋值 ,变量 名 就 只 是 一 个 空 壳 。 在 声明 的 同时 可 以 为 
变量 赋 一 个 值 。 

var name = "XiaoMing", age = 18, weight = 60; 

正 由 于 JavaScript 的 弱 类 型 关系 ,在 同一 个 var 中 声明 并 赋值 了 数值 类 型 的 变量 和 字 
符 串 类 型 的 变量 ,这 是 允许 的 。 

这 里 要 格外 注意 的 一 点 是 ,变量 赋值 以 后 ,可 以 再 通过 赋值 改变 变量 的 值 。 

var name = "XiaoMing"; // 字 符 串 类 型 的 变量 

name = 60; // 允 许 , 不 推荐 

在 上 述 例 子 中 ,把 变量 name 声明 一 个 字符 串 , 之 后 再 通过 赋值 使 name 保存 了 一 个 
数值 。 这 在 JavaScript 中 是 允许 的 , 正 是 JavaScript 弱 类 型 的 原因 。 但 是 不 建议 这 样 的 做 
法 ,保持 一 个 变量 的 数据 类 型 不 变 有 助 于 代码 的 可 读 性 ,减少 Bug 的 出 现 。 


2.2.3 变量 的 作用 域 


声明 定义 的 变量 都 存在 着 一 个 作用 和 访问 范围 ,也 是 所 谓 的 作用 域 。 按 照 作 用 域 的 
范围 不 同 ,变量 可 分 为 全 局 变量 和 局 部 变量 。 

每 个 函数 内 部 都 有 自己 的 作用 域 ,在 函数 中 声明 定义 的 变量 视 为 局 部 变量 , 即 只 能 
在 函数 内 部 才能 访问 到 ,一 旦 函数 执行 完毕 返回 到 函数 外 的 环境 时 ,函数 外 部 便 无 法 继 
续 访 问 到 函数 内 部 的 局 部 变量 ,如 下 所 示 。 


function test() { 


var value = 100; 


alert( value) ; 
} 
test( ); // 输 出 100 
alert( value) // 输 出 null 表示 value 未 定义 


在 函数 内 部 输出 警示 信息 时 ,因为 与 局 部 变量 value 处 于 同一 作用 域 中 ,因此 能 够 访 
Pe 
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问 到 value 的 值 。 但 是 在 函数 外 部 输出 警示 信息 时 ,不 能 访问 到 函数 中 的 局 部 变量 value， 
因此 会 搜索 全 局 环境 中 的 全 局 变量 value, 而 没有 定义 全 局 变量 value ,因此 输出 为 null。 
而 在 函数 之 外 声明 定义 的 变量 一 般 是 全 局 变量 , 它 的 作用 范围 最 广 ,在 当前 的 代码 
环境 下 都 能 被 访问 到 ,其 中 也 包括 了 函数 在 内 。 如 以 下 例子 所 示 。 
var value = 100; 


function test() { 


value = 200; 

alert(value) ; 
test( ); // 输 出 200 
alert( value) ; // 输 出 200 


在 函数 内 部 修改 value 的 值 并 输出 value ,此 时 函数 内 部 并 没有 声明 定义 局 部 变量 
value ,因此 value 标识 符 的 解析 会 沿 着 上 级 的 作用 域 继续 寻找 。 由 于 已 经 在 函数 外 定义 
了 一 个 全 局 变量 value, 因 此 函数 内 部 访问 到 这 个 全 局 变量 ,修改 它 的 值 并 输出 警示 信息 。 
可 见 在 函数 执行 结束 后 ,全 局 变量 的 值 已 经 被 修改 为 200。 

在 JavaScript 需要 注意 的 一 点 是 没有 块 级 作用 域 。 在 其 他 强 类 型 语言 ,如 C 语言 中 ， 
一 对 大 括号 中 的 内 容 拥 有 自己 的 作用 域 ,一 旦 超出 了 大 括号 的 范围 ,其 中 的 局 部 变量 就 
访问 不 到 。 但 是 在 JavaScript 中 不 存在 这 样 的 规则 ,即使 已 经 退出 大 括号 也 还 可 以 访问 
到 花 括 号 中 的 变量 ,如 下 所 示 。 

if (true) { 
var value = 100; 


} 
alert( value) ; // 输 出 100 
在 使 用 for 语句 时 ,经 常会 定义 一 个 内 部 递增 的 局 部 变量 ,如 下 。 
for (vari = 0; i < 100; i+ +){ 
doSomething( ); 
} 
alert(i); // 输 出 100 
在 循环 语句 结束 后 ,变量 i 还 存在 于 当前 的 作用 域 之 中 。 


2.3 数据 类 型 


JavaScript 中 有 5 种 基本 数据 类 型 ,分 别 是 : Undefined、Null、 Boolean、Number 和 
String。 并 且 还 有 一 种 复杂 数据 类 型 Object, Object 类 似 是 一 种 引用 类 型 ,其 具体 的 行为 
“23 . 
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与 基本 数据 类 型 有 别 , 后 面 会 详细 介绍 到 。 


2.3.1 Undefined 类 型 


Undefined 类 型 只 有 一 个 值 , 那 就 是 undefined , 即 未 定义 的 值 。 那 么 什么 时 候 会 产生 
这 个 值 呢 ? 那 就 是 使 用 var 关键 字 声明 一 个 变量 却 没有 对 其 初始 化 时 ,这 个 变量 所 指 的 
值 类 型 位 置 ,所 以 为 undefined 。 

可 以 使 用 alert 函数 显示 变量 的 值 来 观察 未 初始 化 的 变量 的 数据 类 型 。 

var test; //test 变量 并 没有 初始 化 

alert( test) ; // 显 示 信 息 为 undefined 

还 可 以 手动 地 为 一 个 变量 赋值 为 undefined 值 : 

var test = undefined; // 将 test 赋值 为 undefined 

alert(test = = undefined); 

// 这 里 用 = = 运算 符 判 断 test 的 值 是 否 等 于 undefined ,返回 true 


2.3.2 Null 类 型 


Null 类 型 同样 也 只 有 一 个 值 , 即 null, 意 思 是 为 空 的 。null 值 所 代表 的 意思 类 似 于 C 
语言 中 的 空 指针 , 即 什么 也 没有 指向 。 

var test = null; //test 变量 赋值 为 null 

alert( test) // 显 示 信 息 为 null 

如 此 一 看 undefined 和 null 似乎 非常 相似 ,而 实际 上 undefined 值 是 派生 自 null 值 , 因 
此 当 用 = = 运算 符 判定 相等 性 时 返回 true 值 , 即 判定 相等 。 

alert(null = = undefined) // 显 示 信 息 为 true 

虽然 两 者 看 上 去 可 以 互 用 ,但 是 一 般 来 说 对 此 两 值 的 意义 不 相同 。null 一 般 是 作为 
空 指针 的 意味 , 即 当 一 个 变量 是 指向 对 象 ,但 对 象 不 存在 时 ,应 该 明确 指出 该 变量 指向 
null, 这 样 做 有 助 于 代码 的 可 读 性 。 


2.3.3 Number 类 型 


Number 类 型 是 数值 类 型 ,其 中 可 分 为 整 型 和 浮 点 型 两 类 。 
1. 整 型 
整 型 是 数值 的 整数 类 型 ,不 含 小 数 。 可 用 十 进 制 . 八 进 制 和 十 六 进 制 表 示 。 可 以 直 
接 使 用 十 进 制 整数 初始 化 一 个 变量 ,如 下 。 
7 


~ 
第 2 章 编程 基 友信 


var number = 55; // 十 进 制 整 型 数 
如 果 用 八进制 的 数 赋值 ,可 以 在 数值 前 面 添加 一 个 前 导 0 作为 八进制 数 的 标记 。 要 
注意 的 是 如 果 数 值 中 有 字面 值 超出 了 八进制 的 数值 范围 , 即 超过 8 的 话 ,那么 前 导 零 将 
忽略 ,处 理 为 十 进 制 数 。 
var number = 064; // 表 示 八 进 制 数 64, 换算 成 十 进 制 为 52 
var number = 081; // 前 导 零 将 忽略 , 表示 成 十 进 制 数 81 
如 果 用 十 六 进 制 数 表示 , 则 需要 在 数值 前 方 加 0x, 其 中 十 六 进 制 数值 范围 是 0 ~9 和 
a ~f, 字 母 可 小 写 也 可 大 写 A ~ 下 。 


var number = 0x11; // 十 六 进 制 数 11, 转换 成 十 进 制 数 为 17 
var number = OxAB; // 十 六 进 制 数 AB, 转换 成 十 进 制 数 为 171 


在 进行 算术 运算 时 ,八进制 和 十 六 进 制 都 将 转化 为 十 进 制 数 进行 运算 。 

2. 浮 点 数 

所 谓 浮 点 数 即 表示 为 数值 包含 小 数 点 和 小 数 ,要 注意 的 一 点 是 ,如 果 浮 点 数 可 表示 
为 整数 ,JavaScript 会 自动 去 除 小 数 点 并 表示 成 整数 ,因为 浮 点 数 需 要 的 存储 空间 要 比 整 
型 大 ,浏览 器 内 置 的 JavaScript 解释 器 会 自动 做 出 转换 ,以 便 节 省 变量 的 存储 空间 。 

var number = 5.2; // 浮 点 数 
var number = .8; // 允 许 , 表示 为 0.8 
var number = 2.0; // 自 动 转化 为 整 型 数 2 存储 , 节省 空间 

上 述 例子 中 可 以 直接 用 .8 来 表示 浮 点 数 0.8 ,但 是 不 推荐 这 种 写法 ,这 样 会 导致 代 
码 不 美观 ,可 读 性 降低 。 

对 于 一 些 较 大 的 数 或 者 是 小 数 点 后 的 零 非常 多 的 小 数 ,可 以 改 用 科学 计数 法 来 表 
示 , 即 用 字母 e 和 数字 来 表示 一 个 数值 乘 上 10 的 指数 寡 , 其 中 字母 e 可 小 写 也 可 大 写 EE。 

var number = 1.23e8; // 表 示 12300000, 即 1.23 x 10 

var number = 5e -7; // 表 示 为 0.0000005, 即 5 x 1077 

在 使 用 浮 点 数 的 时 候 需 要 注意 的 一 个 问题 是 :不 要 尝试 去 测试 某 个 特定 的 浮 点 数 。 
可 以 输入 以 下 代码 测试 一 下 结果 。 

alert((0.1 + 0.2) = = 0.3); // 提 醒 信息 为 "false" 

上 面 的 例子 中 ,将 0.1 +0.2 的 结果 与 0.3 判断 相等 性 ,毋庸 置疑 地 两 者 结果 应 该 是 
相等 的 ,可 是 非常 困扰 地 判断 结果 会 是 false, 即 两 者 不 相等 。 可 以 利用 alert 输出 0. 1 + 
0.2 的 结果 看 看 。 

alert(0.1 + 0.2); // 提 醒 信息 为 0.30000000000000004 

究 其 原因 是 浮 点 数 进行 计算 时 会 有 一 定 的 舍 人 误差 ,精确 度 远 远 不 如 整 型 运算 。 浮 
点 数 的 最 高 精度 为 17 位 , 相 加 后 出 现 了 少许 的 偏差 ,虽然 对 于 运算 的 结果 来 说 影响 不 
大 ,但 是 如 果 要 测试 相等 性 ,那么 造成 的 结果 就 截然 相反 ( 由 相等 变 成 不 相等 ) 。 当 然 不 
是 全 部 浮 点 数 都 会 产生 这 样 的 误差 ,但 是 为 了 确保 在 任何 情况 下 所 编写 的 代码 都 能 运行 
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正常 ,最 好 不 要 直接 去 相等 测试 特定 的 浮 点 数 。 

也 可 以 拟定 一 个 精确 度 来 测试 两 个 浮 点 数 的 相等 性 。 

alert(((0.1 + 0.2) - 0.3) < 0.0001); 

// 这 是 精确 度 为 小 数 点 后 四 位 来 判断 浮 点 数 的 相等 性 

3. 数值 范围 

JavaScript 中 能 够 保存 的 数值 当然 不 可 能 是 无 限 大 的 ,用 于 保存 数值 的 所 用 内 存 大 小 
使 具体 数字 的 表示 在 最 大 数值 和 最 小 数值 之 间 。 可 以 利用 Number. MIN_VALUE 查看 最 
小 数值 和 利用 Number. MAX_VALUE 查看 最 大 数值 。 在 大 多 数 浏览 器 中 ,最 小 数值 为 
5e -324 ,最 大 数值 为 1.7976931348623157e +308。 

当 计 算 结果 超出 了 数值 范围 ,JavaScript 就 不 能 准确 表示 。 当 数值 小 于 最 小 数值 时 ， 
数值 显示 为 0。 当 数值 大 于 最 大 数值 时 ,数值 表示 为 Infinity ,表示 为 无 穷 大 的 意思 。 可 以 
用 函数 isFinite( ) 来 确定 一 个 数 是 否 有 穷 。 

下 面 利 用 另 一 调试 函数 console. log( ) 来 把 消息 输出 到 控制 台中 ,这样 就 可 以 一 次 输 
出 所 有 调试 信息 ,方便 调试 。 实 现 如 代码 清单 2 -1 所 示 。 


代码 清单 ”2 -1 
console. log( Number. MIN_VALUE) ; // 返 回 5e -324 
console. log( Number. MAX_VALUE) ; // 返 回 1.7976931348623157e +308 


console. log( Number. MIN_VALUE / 2); // 返 回 0 

console. log( Number. MAX_VALUE * 2); /返回 Infinity 

console. log( isFinite( Number. MAX_VALUE * 2)); // 返 回 false 
console. log(1 / 0); // 返 回 Infinity 


代码 清单 中 省 略 掉 HTML 文档 的 其 余部 分 ,只 保留 JavaScript 代码 。 

所 使 用 的 浏览 器 为 Google 浏览 器 ,根据 浏览 器 的 不 同 可 能 会 出 现 不 同 的 数值 。 根 据 
第 1 章 的 方法 打开 控制 台 , 即 可 以 看 到 控制 台中 按 顺 序 输出 相应 的 消息 。isFinite 函数 检 
查 一 个 数值 是 否 有 穷 ,由 于 Number. MAX_VALUE * 2 已 经 超出 了 最 大 值 范围 ,所 以 结果 
返回 false, 即 不 是 有 穷 。 

最 后 输出 1 除 以 0 的 结果 ,在 数学 上 这 是 不 合法 的 算式 ,而 在 JavaScript 则 允许 存在 ， 
输出 结果 是 Infinity。 

4. 数值 转换 

在 JavaScript 中 有 3 个 函数 可 以 将 其 他 数据 转化 成 十 进 制 数值 ,这 3 个 函数 分 别 是 
Number( ) .parseInt( ) 和 parseFloat( ) 。 可 以 转换 的 数据 类 型 包括 之 前 提 到 过 的 5 种 基本 
数据 类 型 ,转化 规则 如 下 。 

学。 undefined 转化 为 NaN ,其 中 NaN 是 非 数 值 ( Not a Number) 的 意思 , 即 不 能 转化 

is 


L? 
第 2 章 编程 基础 。 


成 数值 ,可 以 用 函数 isNaN( ) 来 查看 这 数值 。 

学 null, 用 Number 函数 时 转化 为 0, 另 外 parseInt( ) 和 parseFloat( ) 转 化 为 NaN。 

党 “Number 类 型 ,如 果 是 十 进 制 数 ,那么 没有 变化 。 如 果 数 值 符合 八进制 形式 , 即 
加 上 前 导 零 并 且 其 中 的 数值 不 超过 8 ,会 将 八进制 数 转化 成 十 进 制 并 输出 。 

党 ”Boolean 类 型 ,用 Number 函数 时 ,hue 转化 成 1, false 转化 成 0。 另 外 parseInt( ) 
和 parseFloat( ) 转 化 为 NaN。 

学 ”Sting 类 型 ,如 果 字 符 串 中 只 包含 数值 ,将 对 应 的 数值 转化 成 十 进 制 , 要 注意 的 
是 转化 会 忽略 前 导 零 , 即 “070" 并 不 转化 为 56, 而 是 转化 为 720。 如 果 是 添加 前 导 “0x”, 可 
以 按照 十 六 进 制 转化 , 即 “*0xA" 转 为 10。String 还 有 其 他 的 转化 行为 , 随 着 函数 会 有 不 同 
的 变化 , 稍 后 会 提 到 。 

下 面 给 出 Number( ) 转 化 函数 的 例子 ,实现 如 代码 清单 2 -2 所 示 。 


代码 清单 ”2 -2 
console. log( Number( undefined) ) ; //NaN 
console. log( Number( null) ) ; //0 
console. log( Number( 070) ); //56 
console. log( Number( OxA)); //10 
console. log( Number( true) ) ; fa | 
console. log( Number( "070")); //70 
console. log( parselnt( null) ) ; //NaN 
console. log( parselnt( true) ) ; //NaN 


注意 070 和 "070" 的 输出 结果 的 差异 ,一 个 是 数字 型 转化 , 另 一 个 是 字符 串 转化 。 可 
以 发 现 Number( ) 就 类 似 于 C 语言 风格 中 的 强 类 型 转化 。 

另外 需要 注意 的 地 方 是 ,对 于 null 值 和 Boolean 类 型 的 值 , 当 使 用 parseInt( ) 和 parse- 
Float( ) 函数 时 会 转化 为 NaN ,这 两 个 函数 专门 针对 数值 和 字符 串 中 的 数值 。 

当 转 化 的 String 类 型 中 包含 数值 以 外 的 符号 或 者 是 空 字符 串 ,转化 的 行为 在 上 面 3 
个 函数 间 就 不 同 了 。 

对 于 Number( ) 函数 , 遇 到 空 字符 串 "" 时 会 转化 为 0, 而 遇 到 包含 数值 以 外 的 字符 串 
时 , 便 会 无 法 解析 而 返回 NaN。 

对 于 parseInt( ) 和 parseFloat( ) 函数 , 遇 到 空 字符 串 "" 时 会 返回 NaN。 当 遇 到 包含 数 
值 以 外 的 字符 串 时 ,函数 会 解析 非 数值 字符 前 的 数字 并 转 为 十 进 制 , 例 如 "123abc123" 会 
转化 成 数值 123。 如 果 非 数值 字符 之 前 没有 数字 , 则 输出 NaN ,例如 " abc123" 会 输出 
NaN ,实现 如 代码 清单 2 -3 所 示 。 
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代码 清单 ”2 -3 
console. log( Number( "")); //0 
console. log( parselnt("" )); //NaN 


console. log( Number("123abc123")); //NaN 
console. log( parselnt("123abc123"));  //123 
console. log( parselnt( "abc123") ) ; //NaN 


在 数值 转化 上 ,parseInt( ) 和 parseFloat( ) 函数 都 有 非常 相似 行为 ,但 是 可 以 从 函数 名 
字 上 推断 出 它们 的 区 别 : 

parseInt( ) 将 数据 转化 成 整 型 数值 ,如 有 浮 点 数 ,将 只 保留 整数 数值 。 

parseFloat( ) 将 数据 转化 成 浮 点 型 数值 ,将 字符 串 中 的 小 数 点 作为 浮 点 数 输出 。 如 果 
遇 到 两 个 小 数 点 , 则 只 保留 第 二 个 小 数 点 前 的 数值 。 

实现 如 代码 清单 2 -4 所 示 。 


代码 清单 。、2 -4 
console. log( parselnt("1")); //1 
console. log( parselnt( "2. 5")); 3 
console. log( parselnt( "5.0") ); //5 
console. log( parseFloat("1")); Ui! 
console. log( parseFloat( "2.5")); Ha.6 
console. log( parseFloat( "5.0")); //5 


console. log( parseFloat( "5. 125.652")); //5.125 


要 注意 的 是 parseFloat( ) 转 化 5.0 的 时 候 ,输出 结果 为 5。 之 前 提 到 过 , 浮 点 数 在 转 
化 整数 时 JavaScript 将 自动 转 为 整数 ,减少 变量 的 存储 空间 。 

parseInt( ) 函数 还 提供 第 二 个 参数 :转化 时 使 用 的 基数 , 即 进 制 数 。 函 数 会 把 第 一 个 
参数 中 的 数值 作为 由 第 二 个 参数 给 定 的 进 制 数 来 转 为 十 进 制 数 ,如 果 要 把 "101" 看 成 二 
进 制 数 来 转化 ,可 用 parseInt("101", 2)。 

在 给 定 进 制 数 的 情况 下 ,如 果 第 一 个 参数 中 的 数值 超过 了 相应 的 进 制 数 ,那么 只 把 
在 此 之 前 的 数值 进行 转化 ,例如 parseInt("113" , 2) ,那么 只 有 "11" 进行 转化 ,输出 结 
为 3 ,实现 如 代码 清单 2 -5 所 示 。 


代码 清单 2 -5 
console. log( parselnt( "101", 2)); //5 
console. log( parselnt("101", 4)); //17 
console. log( parselnt( "17", 8)); //15 


ds 


~ 
第 2 章 编程 基 友信 


console.log(parselnt("F"，16) ) ; 、 5 
console. log( parselnt("113", 2)); //3 
console. log( parselnt( "812", 8)); //NaN 


最 后 的 语句 ,由 于 数值 8 不 在 八进制 范围 内 ,因此 只 转化 8 之 前 的 数值 ,但 是 在 8 之 
前 没有 任何 数值 ,所 以 输出 NaN ,并 不 是 0。 


2.3.4 ”Boolean 类 型 


布尔 ( Boolean) 类 型 代表 的 是 逻辑 上 的 真 假 , 只 有 两 个 值 ;true 和 false ,布尔 类 型 的 值 
一 般 用 在 条 件 判断 中 。 在 JavaScript 中 ,其 他 的 数据 类 型 都 可 以 转化 为 Boolean 类 型 用 于 
条 件 判断 ,以 下 是 各 类 型 的 转换 ,如 表 2 -1 所 示 。 


表 2 -1 各 数据 类 型 转换 表 


数据 类 型 转换 为 true 转换 为 false 
Undefined 不 存在 undefined 
Number 非 零 数值 (包括 Infinity) 0 和 NaN 
String 非 空 字符 串 空 字符 串 ("") 
Object 任何 对 象 null 


由 于 JavaScript 中 能 够 对 不 同类 型 的 数据 作出 自动 转化 为 Boolean 类 型 ,这样 的 灵活 
性 ,可 方便 在 不 同 的 条 件 语 句 中 进行 判断 。 


2.3.5 ”String 类 型 


在 JavaScript 中 字符 串 可 用 单 括号 () 或 者 是 双 括 号 (" ) 表示, 两 种 表示 方式 是 等 价 
的 ,例如 空 字符 串 可 表示 为 或 者 是 "" ,一 个 单词 可 表示 为 string 或 "string" 。 

字符 串 常量 中 包含 了 转 义 字符 ,其 中 有 一 些 表示 不 可 显示 但 是 有 实际 意义 的 字符 ， 
而 另外 一 些 是 避免 匹配 混乱 而 设置 的 转 义 字符 , 表 2 -2 是 转 义 字符 列表 。 


表 2 -2 转 义 字符 
\b 退 格 符 
¥f 换 页 符 
\n 换行 符 
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续 表 
\r 回 车 符 
\t 制 表 符 
单 引 号 
浅 双 引 号 
\\ 反 斜 杠 
\Onnn 八进制 代码 nnn 表示 的 字符 
\xnn 十 六 进 制 代码 nn 表示 的 字符 
\unnnn 十 六 进 制 代码 nnnn 表示 的 Unicode 字符 


因为 转 义 字符 是 用 反 斜 杠 来 做 标记 ,于 是 如 果 要 表示 反 斜 杠 本 身 的 话 ,需要 用 到 反 
斜 杠 的 转 义 字符 \\。 由 于 字符 串 是 使 用 单 引号 或 者 双 引 号 表示 ,所 以 在 显示 单 双 引号 的 
时 候 也 要 使 用 转 义 字符 的 形式 。 


2.3.6 Object 类 型 


JavaScript 是 一 种 基于 对 象 的 编程 语言 ,每 个 对 象 都 有 自己 的 属性 和 方法 ,在 创建 一 
个 Object 对 象 之 后 ,可 以 给 这 个 对 象 添加 属性 和 方法 。 
例如 创建 一 个 人 的 对 象 ,人 有 属性 name ,age 和 weight 等 ,可 以 写成 如 下 形式 。 
var people = new People(); 
people. name = "XiaoMing"; 
people. age = 18; 
people. weight = 60; 
除 此 以 外 ,人 还 能 够 走路 .跑步 和 睡觉 等 ,这 些 都 属于 人 这 个 对 象 的 方法 。 
people. walk() ; 
people. run() ; 
people. sleep() ; 
用 new 关键 字 创 建 出 的 对 象 实例 都 保存 有 自己 的 属性 和 方法 ,这 些 属 性 在 实例 之 间 
应 该 是 互 不 干扰 的 。 
在 JavaScript 中 几乎 所 有 的 事物 都 是 对 象 ,包括 基本 数据 类 型 和 函数 。 在 定义 一 个 
数据 类 型 的 时 候 ,实际 上 已 经 创建 了 一 个 对 象 ,如 下 例子 。 
var age = 18; 
实际 上 ,上 述 代 码 创 建 了 一 个 Number 对 象 ,而 对 象 都 有 自己 的 方法 ,用 Number 对 象 
的 成 员 方法 toString( ) 可 以 将 数字 转化 成 字符 串 形式 "18" 。 
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在 JavaScript 中 所 有 对 象 的 基础 就 是 Object ,可 以 创建 一 个 最 原始 的 对 象 实例 ,并 且 
为 这 个 对 象 实例 添加 属性 和 方法 。 

var people = new Object(); 

people. name = "XiaoDong"; 

people. age = 20; 

创建 了 最 原始 的 对 象 实例 后 ,再 继续 为 这 个 实例 添加 属性 name 和 age。 为 实例 添加 
属性 时 直接 通过 访问 并 赋值 的 方式 即 可 添加 属性 并 初始 化 。 

在 第 6 章 中 会 讲 到 利用 JavaScript 基于 对 象 的 这 个 特性 来 进行 面向 对 象 编程 ,而 面向 
对 象 编程 使 开发 过 程 变 得 编程 方便 \ 代 码 清晰 和 可 扩展 。 


2.4 ”运算 符 与 表达 式 


JavaScript 中 的 运算 符 能 够 作用 于 多 种 不 同类 型 的 值 , 而 运算 符 在 不 同 数据 类 型 中 的 
行为 会 有 一 些 差异 ,下 面 来 介绍 一 下 JavaSeript 中 的 表达 式 与 运算 符 。 


2.4.1 表达 式 的 含义 


表达 式 是 运算 符 和 操作 数 连接 起 来 ,并 符合 语法 规则 的 式 子 。 表 达 式 可 以 由 简单 的 
操作 数 和 运算 符 组 成 ,也 可 由 复杂 的 运算 符 组 成 。 以 下 两 条 式 子 都 属于 表达 式 。 

简单 的 表达 式 可 以 表示 为 : 

x, 100，x +100 

而 复杂 的 表达 式 可 以 由 数 个 操作 数 和 运算 符 组 成 : 

x+2/100 >>1,10 x(a+5) 


每 条 表达 式 都 具有 值 ,其 结果 由 其 中 的 操作 数 和 运算 符 决定 。 
2.4.2 ” JavaScript 中 的 运算 符 


首先 来 认识 一 下 什么 叫 运 算 符 (也 称 操作 符 ) 。 运 算 符 是 针对 数据 的 一 些 基本 运算 
所 代表 的 符号 , 当 把 运算 符 作 用 于 操作 数 时 ,就 相当 于 向 该 操作 数 作出 基本 运算 。 
例如 最 基本 的 加 减 乘除 运算 ( + 、- 、* /) ,当然 也 有 其 他 一 些 运算 符 , 按 照 运 算 符 
的 作用 操作 数 个 数 , 可 分 为 单 目 运算 符 (只 有 1 个 操作 数 ) 、 双 目 运 算 符 (2 个 操作 数 ) 和 
三 目 运算 符 (3 个 操作 数 ) 。 
除 此 以 外 ,运算 符 还 有 优先 级 和 结合 性 之 分 ,优先 级 决定 了 运算 符 执行 的 先后 顺序 
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TM 
结合 性 决定 了 运算 符 两 边 的 表达 式 的 执行 顺序 。 表 2 -3 列 出 JavaScript 中 各 个 运算 符 的 


优先 级 和 结合 
表 2 -3 运算 符 优先 级 和 结合 性 列表 
优先 级 运算 符 结合 性 
1 (IT 左 结合 
2 ++ 一 一 1 ~ -( 取 负 ) typeof new delete 右 结 合 
3 */% 左 结合 
+ 一 左 结合 
5 站 左 结 合 
6 <<=>>= 左 结合 
7 Ee 左 结合 
8 & 左 结合 
9 左 结 合 
10 1 左 结合 
11 && 左 结合 
12 11 左 结合 
13 7 右 结合 
14 =+= -=*=/=%= >>=<<=&=|1= 右 结合 
15 左 结合 
2.4.3 运算 符 的 优先 级 


运算 符 都 有 自身 的 优先 级 ,例如 乘除 号 ( * 和 /) 要 比 加 减 号 ( + 和 - ) 优先 计算 ,而 
不 仅仅 是 算术 运算 符 , 其 他 所 有 的 运算 符 都 有 各 自 的 优先 级 ,因此 当 需 要 在 一 条 表达 式 
中 使 用 多 种 运算 符 时 要 注意 好 每 个 运算 符 的 优先 级 别 , 否 则 有 可 能 达 不 到 预期 的 结果 ， 


不 过 可 以 在 操作 数 之 间 添 加 括号 ( ) 使 其 优先 计算 。 
例如 表达 式 


a+bxc 


由 于 乘法 运算 符 优先 级 大 于 加 法 运算 符 ,因此 上 述 表达 式 先 计算 乘法 青 计 算 加 法 ， 


即 表达 式 的 计算 顺序 为 a+ (b xc)。 
另外 二 个 例子 
3+8 >2x4 


可 以 看 到 加 法 和 乘法 运算 符 优先 级 高 于 > 运算 符 ,因此 表达 式 执行 顺序 为 (3 +8) > 


(2 x4)。 
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其 中 圆 括号 的 优先 级 位 于 第 一 位 ,一 般 可 以 在 表达 式 的 子 表达 式 中 适当 添加 圆 括 
号 ,使 其 与 数学 中 的 运算 顺序 一 样 。 


2.4.4 运算 符 的 结合 性 


运算 符 也 有 自身 的 结合 性 ,分 为 左 结合 性 和 右 结合 性 , 即 在 同 优先 级 的 情况 下 , 左 结 
合 性 表示 运算 符 左 边 先 起 作用 , 同 理 右 结合 性 表示 运算 符 右边 的 表达 式 先 起 作用 。 

例如 减 号 ” -”, 有 表达 式 

10 -5 -3 

根据 * - "运算 符 是 左 结合 性 ,所 以 这 个 表达 式 先 计 算 10 - 5, 再 把 结果 减 去 3, 即 
(10 - 5)—- 3。 

而 另 一 条 表达 式 

二 :二 3 

其 中 ”= "是 右 结合 性 , 即 表达 式 等 于 x =(y = 3)。 所 以 结果 是 先 把 3 赋值 给 变量 
y, 赋 值 结 束 后 再 把 y 的 值 赋 给 变量 x ,效果 等 同 于 把 3 同时 赋值 给 x 和 y 变量 。 


2.4.5 算术 运算 符 


1. 加 法 运算 符 

加 法 运算 符 ( + ) 是 将 两 个 数字 相 加 起 来 得 到 结果 。 由 于 运算 符 可 以 作用 于 不 同 的 
数据 类 型 上 , 接 下 来 侧重 讨论 作用 于 字符 串 和 数值 类 型 时 的 行为 。 

党 ”两 个 操作 数 都 为 数值 类 型 

当 两 个 操作 数 都 为 数值 类 型 时 ,加 法 运算 即 是 数学 上 的 相 加 ,无 论 是 整 型 数据 或 者 
是 浮 点 数 都 可 相 加 于 一 起 ,例如 6.3 + 4 结果 为 10.3。 

党 ”两 个 操作 数 都 为 字符 串 

当 两 个 字符 串 用 ” + "号 运算 时 ,其 结果 相当 于 把 两 个 字符 串 头 尾 连接 起 来 ,第 二 个 
字符 串 连 接 于 第 一 个 字符 串 的 尾 端 。 例 如 " Hello" + "World" 结 果 为 "Hello World" 。 

学 ”一 个 为 数值 类 型 , 另 一 个 为 字符 串 

在 这 种 情况 下 ,数值 类 型 的 操作 数 会 被 转化 为 字符 串 ,然后 再 连接 于 另 一 个 字符 串 
上 。 例 如 25 + "5" 结 果 为 字符 串 "255" ,因为 此 时 数值 25 转化 为 字符 串 "25" ,相当 于 " 
25" + "5" ,因此 两 字符 串 连 接 结果 为 "255" 。 

2. 减法 运算 符 

减法 运算 符 ( - ) 对 字符 串 的 行为 不 同 于 加 法 ,减法 运算 符 并 不 能 对 字符 串 作 出 * 删 
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减 ”的 行为 ,因此 减法 运算 符 将 优先 把 操作 数 转化 为 数值 型 再 做 减法 运算 。 
学 ”两 个 操作 数 都 为 数值 类 型 
当 两 个 操作 数 都 为 数值 类 型 时 ,减法 运算 即 是 数学 上 的 相 减 ,3 - 8 结果 为 -5。 
学 ”两 个 操作 数 都 为 字符 串 
当 操 作 数 都 为 字符 串 时 ,JavaScript 会 自动 调用 Number( ) 函数 对 字符 串 进行 转换 , 转 
化 为 数值 数据 后 再 相 加 。 如 果 不 能 被 Number( ) 函数 转化 成 数值 ,运算 结果 则 为 NaN , 即 
非 数值 。 
学 ”一 个 为 数值 类 型 , 另 一 个 为 字符 串 
同 理 , 首 先 把 字符 串 转化 成 数值 再 作 相 减 运算 ,如果 转化 不 了 ,结果 为 NaN。 
除了 作为 双 目 运算 符 以 外 , 减 号 ( - ) 还 可 以 用 作 取 负数 的 作用 , 即 作 用 于 一 个 操作 
数 并 对 操作 数 取 反 。 例 如 - (3 + 5) 结 果 为 -8。 
3. 乘法 .除法 和 取 模 
运算 符 * /和 多 都 是 数学 中 的 乘法 .除法 和 取 模 运算 ,由 于 字符 串 都 没有 相应 的 定 
义 , 因 此 在 运算 时 都 是 先 把 非 数值 的 操作 数 转化 为 数值 类 型 ,再 作出 运算 。 
下 面 给 出 以 上 算法 的 例子 ,实现 如 代码 清单 2 -6 所 示 。 


代码 清单 ”2-6 
console.log(5 + 3); //8 
console. log(" Hello" + "World!");  //Hello World! 
console. log("100" + 50); //10050 
console. log("55" — "11"); //44 
console. log("10" — "a"); //NaN 
console. log(4 * 2); //8 
console. log(4 / 0); // lnfinity 
console. log("11" % 3); //2 
console. log( -11 % 3); // -2 


可 以 看 到 表达 式 "10" - "a" 中 ,由 于 字符 "a" 不 能 转化 为 数值 ,所 以 结果 为 NaN。 

表达 式 4 / 0 中 ,在 数学 上 是 不 允许 的 ,因此 当 除 以 无 限 趋 近 于 0 的 数 ,所 以 结果 为 
无 穷 大 Infinity 。 

表达 式 -11 % 3 的 负数 取 模 结果 为 -2, 读 者 可 能 会 发 现 不 同 语言 中 的 负数 取 模 结 
果 不 相同 ,这 跟 内 部 的 运算 方法 有 关 。 

4. 自 增 和 自 减 运算 符 

在 编程 过 程 当中 最 常用 到 的 运算 符 应 该 就 是 自 增 ( + + ) 和 自 减 ( - - ) 运 算 符 ,这 
两 个 运算 符 有 两 个 版 本 :前 置 和 后 置 。 两 者 都 为 一 目 运算 符 ,前 置 位 于 操作 数 之 前 ,而 后 
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置 就 位 于 操作 数 之 后 。 
自 增 运算 符 使 操作 数 增加 1 ,而 自 减 就 使 操作 数 减 1, 如 下 所 示 。 
+ +num; // 相 当 于 num = num + 1; 
— —nNum; // 相 当 于 num = num - 1 


自 增 和 自 减 运算 符 作用 后 都 会 返回 值 ,但 是 前 置 和 后 置 的 返回 值 会 有 所 不 同 。 前 置 
是 先 自 增 1 后 再 返回 当前 的 数值 ,而 后 置 先 返 回 当前 数值 再 自 增 1。 给 出 以 下 例子 ,实现 
如 代码 清单 2 -7 所 示 。 


代码 清单 ”2 -7 
var num = 15; 
console. log( num + +); //15, 先 返 回 当前 值 15, 再 自 增 1 
console. log( num); //16, 可 见 此 时 已 经 自 增 1 
console. log( + +num); //17, 先 自 增 1, 再 返回 结果 值 
console. log( num); //17, 结果 值 


代码 中 未 演示 自 减 运算 符 , 自 减 运算 符 与 自 增 运算 符 同 理 。 

因此 在 使 用 自 增 和 自 减 运算 符 时 要 注意 返回 的 值 。 自 增 自 减 运算 符 简洁 ,在 编程 中 
经 常用 于 遍历 数组 和 循环 语句 的 运算 中 ,学 会 合理 调用 前 置 和 后 置 的 运算 符 可 以 使 代码 
简洁 。 给 出 以 下 带 有 自 增 运 算 符 的 表达 式 , 实 现 如 代码 清单 2 -8 所 示 。 


代码 清单 ”2 -8 
var num1 = 15, num2 = 5; 
console. log( num1 + + +num2) ; //20 
console. log( num1); //16 
console. log( num2); //5 
num1 = 15; 
num2 = 5; 
console.log(num1 + + + Num2); //20 
console. log( num1); //16 
console. log( num2); //5 
num1 = 15; 
num2 = 5; 
console.log(num1 + + +num2); //21 
console. log( num1); //15 
console. log( num2); //6 
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上 面 的 例子 较为 复杂 ,代码 进行 了 3 次 基本 相同 的 表达 式 运 算 , 可 是 发 现 结果 稍 有 
不 同 。 注 意 其 中 第 一 条 表达 式 是 两 操作 数 之 间 用 3 个 + ”连接 ;第 二 条 表达 式 中 ,两 个 
连续 “ + "连接 于 numl 后 ,随后 用 空格 隔 开 * + "并 连 上 num2; 第 三 条 表达 式 中 , 先 用 空 
格 隔 开 * + "连接 numl ,而 后 两 个 连续 “ + " 接 于 num2 前 。 

第 一 条 表达 式 暂 且 不 讨论 。 第 二 条 表达 式 的 输出 结果 为 20 ,而 后 numl 为 16 ,num2 
为 5, 可 见 两 个 “ +” 号 作为 后 置 自 增 符 作 用 于 numl。 所 以 表达 式 相当 于 (numl + + ) + 
num2 ,于 是 运算 结果 为 先 返 回 numl 当前 值 15, 而 后 才 自 增 1, 返 回 的 15 与 num2 相 加 
得 20。 

第 三 条 表达 式 中 ,两 个 连续 “ +" 作为 前 置 自 增 运算 符 作用 于 num2 ,表达 式 相 当 于 
numl +( + +num2), 因 此 运算 结果 为 num2 自 增 1 后 再 返回 结果 值 6,numl 和 6 相 加 
得 21。 

现在 回头 看 第 一 条 表达 式 的 结果 ,可 见 不 加 空格 的 情况 下 ,解析 脚本 代码 时 先 遇 到 
了 两 个 连续 的 + ”, 所 以 解析 为 自 增 运算 符 , 结 果 表 达 式 相当 于 (numl + + ) + num2 ,与 
第 二 条 表达 式 相同 ,结果 也 一 样 。 

在 实际 编程 过 程 中 ,不 建议 第 一 种 表达 式 的 写法 ,这 样 容 易 导 致 错误 或 结果 未 知 。 
可 以 尝试 在 容易 混乱 的 表达 式 中 加 上 圆 括号 ( ) 以 明确 想 要 的 运算 顺序 ,这样 有 利于 提高 
代码 的 可 读 性 。 同 时 也 建议 操作 数 和 运算 符 之 间 用 空格 隔 开 , 这 样 使 得 代码 清晰 易 读 ， 
而 且 可 以 避免 上 述 第 一 种 表达 式 情 况 的 发 生 。 

5. 赋值 运算 符 

简单 的 赋值 运算 符 由 等 于 号 ( = ) 表 示 , 它 的 作用 是 将 一 个 数据 赋值 给 一 个 变量 。 

var num = 100; 


而 在 等 于 号 ( = ) 前 添加 算术 运算 符 或 位 操作 符 时 ,就 变 成 了 复合 赋值 运算 符 。 例 


如 有 : 
num + = 10; 等 价 于 num = num + 10; 
num % = 10; 等 价 于 num = num % 10; 
num * =5 + 10; ”等 价 于 num = num * (5 + 10); 


其 中 需要 注意 的 是 上 面 第 三 条 表达 式 , 究 竞 是 * * = "赋值 运算 符 先 起 作用 还 是 
“+” 先 起 作用 。 通 过 查看 运算 符 优 先 级 ,可 以 发 现 赋值 运算 符 优先 级 倒数 第 二 ,因此 是 
加 法 “+" 先 起 作用 ,于 是 等 价 于 上 述 右 边 的 表达 式 。 

以 下 列 出 所 有 复合 赋值 运算 符 : 

* 二 太 三 % = 


# 
各 二 < < = > > 三 be 


~ ny 
= = 
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2.4.6 关系 运算 符 


1. 比较 运算 符 

两 个 操作 数 的 数值 比较 是 通过 比较 运算 符 :小 于 ( < ) .大 于 ( > ) .小 于 等 于 (< =) 
和 大 于 等 于 ( > = ) 。 当 操作 数 中 含有 非 数值 的 数据 类 型 时 比较 行为 也 会 有 差异 ,下 面 侧 
重 讨论 数值 类 型 和 字符 串 类 型 的 情况 。 

学 ”操作 数 都 为 数值 类 型 

当 操作 数 都 为 数值 类 型 ,比较 运算 符 是 以 数值 大 小 做 比较 ,规则 与 数学 上 的 一 致 , 结 
果 返 回 一 个 布尔 值 ,true 或 者 是 false。 

学 ”操作 数 都 为 字符 串 

当 操作 数 都 为 字符 串 时 ,运算 符 则 比较 两 个 字符 串 对 应 的 字符 编码 值 。 注 意 这 里 比 
较 的 是 字符 编码 值 ,而 并 不 是 字母 表 顺 序 。 虽 然 字符 编码 确实 以 字母 表 顺 序 排 列 ,但 是 
需要 认识 到 大 写字 母 的 字符 编码 全 部 小 于 小 写字 母 的 字符 编码 ,因此 表达 式 "A" <"a" 
结果 为 true。 

在 比较 字符 串 时 ,如 果 第 一 个 字母 的 字符 编码 值 相 等 ,那么 比较 操作 将 会 往 后 比较 ， 
直到 比较 出 结果 或 者 字符 串 结束 。 例 如 

"student" < "study" 结果 返回 bue, 因 为 前 4 个 字母 "stud" 都 相等 ,所 以 一 直 比 较 
到 "e" 和 "y" ,"y" 的 字符 编码 较 大 ,所 以 结果 返回 真 。 

还 有 另外 一 点 需要 注意 的 是 , 先 看 下 面 的 例子 

"3 se 结果 返回 true 

如 果 你 对 此 结果 感到 疑惑 ,那么 请 再 次 认真 观察 。 这 里 比较 的 操作 数 都 为 字符 串 ， 
尽管 内 容 都 是 纯 数值 ,但 是 并 不 会 转化 为 数值 再 来 比较 ,因此 比较 的 依然 是 字符 编码 值 。 
从 第 一 个 字符 开始 比较 ,由 于 字符 "2" 的 字符 编码 要 小 于 字符 "3" ,因此 结果 返回 真 。 

学 ”一 个 为 数值 , 另 一 个 为 字符 串 

当 操作 数 中 有 一 个 为 数值 类 型 时 , 另 一 个 操作 数 先 利用 Number( ) 函数 转化 为 数值 
类 型 ,然后 再 执行 数值 比较 。 因 此 现在 有 下 面 的 例子 

< 结果 返回 false 

返回 的 结果 为 false, 因 此 这 一 次 有 操作 数 为 数值 类 型 ,所 以 左边 的 字符 串 "23" 将 转 
化 为 数值 23 ,23 大 于 3。 再 有 下 面 的 例子 : 

Wa 3 结果 返回 false 

WW 结果 返回 false 

因为 要 把 字符 "a" 转化 为 数值 ,但 是 在 前 面 提 到 "a" 无 法 转化 为 数值 ,因此 转化 结果 
为 NaN ,一 个 非 数 值 NaN 是 无 法 与 数值 比较 的 ,因此 无 论 怎么 比较 ,结果 都 是 false。 下 面 

ey 
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是 比较 运算 符 的 例子 ,实现 如 代码 清单 2 -9。 


代码 清单 ”2 -9 
console. log(4.7 > 4); //true 
console. log(070 > 69); //false 
console. log(Oxf > 13); //true 
console. log("a"” < "b"); //true 
console. log("a"” < "A"); //false 
console. log(" Hello” < "Hello World!"); //true 
console. log( "070" > 69); //true 
console. log( "Oxa" > 9); //true 


看 到 第 二 条 表达 式 070 > 69 返回 结果 为 false, 因 为 遇 到 前 导 零 时 将 判断 为 八进制 ， 
因此 转化 为 十 进 制 以 后 为 56 ,56 小 于 69。 后 面 的 十 六 进 制 同 理 。 现 在 再 看 到 表达 式 
"070"” > 69 结果 返回 bue, 这 里 的 "070" 是 字符 串 , 所 以 先 用 Number( ) 函数 转化 为 数值 
类 型 ,返回 到 前 面 的 内 容 发 现 Number( ) 会 忽略 前 导 零 ,不 能 转换 字符 形式 的 八进制 , 因 
此 转化 结果 为 70 ,70 要 大 于 69。 但 是 字符 形式 的 十 六 进 制 则 没有 问题 ,所 以 "0xa" > 9 
相当 于 10 > 9。 

表达 式 "Hello" < "Helle World!" 返 回 结果 为 true, 可见 前 面 的 5 个 字符 " Hello" 都 
相同 ,但 是 左边 的 字符 串 先 结束 了 ,因此 此 时 小 于 成 立 ,返回 true。 

2. 相等 运算 符 

在 JavaScript 中 有 两 种 形式 的 相等 运算 符 , 一 种 是 默认 先 转化 数值 再 作 比 较 , 称 为 相 
等 运算 符 ; 另 一 种 则 是 仅 比较 而 不 作 转 换 , 称 为 全 等 运算 符 。 

洛 ” 相 等 ( = = ) 和 不 相等 (! =) 

当 比 较 的 两 个 操作 数 数据 类 型 相同 时 ,运算 符 则 可 以 不 做 转换 直接 比较 。 当 其 中 一 
个 操作 数 为 数值 类 型 ,那么 另 一 个 操作 数 也 要 转换 为 数值 类 型 后 再 作 比较 ,所 以 字符 串 
也 会 用 Number( ) 函数 转化 为 数值 类 型 。 

光 全 等 ( = = = ) 和 不 全 等 ( = = = 

在 这 个 运算 符 下 ,不 同类 型 的 操作 数 不 会 自动 转换 (Number 类 型 的 进 制 转换 除外 )， 
而 是 直接 比较 。 例 如 : 

"Oxa" = = 10; // 结 果 返 回 tue, 字 符 形 式 的 十 六 进 制 转换 后 相等 

"0xa" = = = 10; ”// 结 果 返 回 false, 因 为 不 允许 类 型 转换 ,因此 不 相等 

下 面 通过 例子 来 观察 它们 的 差异 ,实现 如 代码 清单 2 - 10 所 示 。 

代码 清单 ”2 -10 


console.log(Oxa = = 10); //true 


ss 
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console. log(0xa = = = 10); //true 

console.log("0xa"” = = "10"); //false 

console. log("0xa"” = = 10); //true 

console.log("0xa"” = = = 10); //false 

console. log(10 = = "10"); //true 

console. log(10 = = = "10"); //false 

因为 在 Number 类 型 中 进 制 转换 不 属于 类 型 转换 ,因此 表达 式 0xa = = = 10 结果 返 
回 true。 

表达 式 "0xa" = =“"10" 中 ,因为 操作 数 都 为 字符 串 形式 ,因此 不 会 自动 转换 数值 类 
型 ,因此 比较 的 还 是 字符 串 的 内 容 , 明 显 两 者 不 相等 。 

10 = = "10" 和 10 = = = "10" 的 结果 如 上 面 所 述 ,字符 形式 的 十 进 制 转换 后 相等 ， 


而 后 者 因为 不 允许 类 型 转换 ,因此 不 相等 。 
2.4.7 逻辑 运算 符 


1. 逻辑 非 
逻辑 非 运算 符 由 一 个 感叹 号 ( 1) 表示 ,其 作用 是 对 一 个 布尔 值 取 反 。 同 样 这 个 运算 
符 可 作用 于 JavaScript 中 的 所 有 数据 类 型 ,其 运算 过 程 是 :按照 表 2 -1 把 数据 类 型 转 为 对 
应 的 布尔 值 ,然后 再 将 结果 取 反 。 
2. 逻辑 与 
逻辑 与 运算 符 由 符号 ( &&) 表示 ,其 运算 规则 如 表 2 -4 所 示 。 
表 2 -4 逻辑 与 规则 


第 一 个 位 第 二 个 位 结果 
false false false 
false true false 
true false false 
true true true 


逻辑 与 操作 属于 短路 操作 , 即 一 旦 可 以 确定 结果 后 ,后 面 的 操作 都 不 执行 ,而 是 直接 
返回 结果 ,实现 如 代码 清单 2-11 所 示 。 
代码 清单 ”2 -11 


var flagt = 10, flag2 = 100; 
true && (flag1 = 20); 


39. 


ET HTML5 朗 互动 画 
false && (flag2 = 200); 


console. log( flag1); //20 
console. log( flag2) ; //100 


执行 表达 式 运算 以 后 ,可 以 看 到 只 有 flagl 被 赋予 了 新 的 值 ,flag2 没有 改变 。 在 第 一 
条 表达 式 中 ,因为 第 一 个 操作 数 是 rue, 所 以 要 判断 表达 式 的 真 假 还 需要 判定 第 二 个 操作 
数 的 值 ,所 以 继续 往 下 执行 表达 式 flagl = 20, 因 此 值 改变 了 。 

但 是 第 二 条 表达 式 中 ,第 一 个 操作 数 就 是 false, 所 以 无 论 操作 数 是 什么 都 只 能 返回 
false, 因 此 逻辑 与 运算 符 * 偷懒 "了 , 即 不 判断 第 二 个 操作 数 直 接 返 回 结果 false, 因此 后 
的 赋值 表达 式 并 没有 执行 ,而 这 样 的 行为 就 称 为 短路 操作 ,同样 后 面 的 逻辑 或 (11) 也 为 
短路 操作 。 

在 JavaScript 中 ,逻辑 与 的 返回 结果 并 不 只 是 布尔 值 ,还 可 能 是 对 象 , 它 遵守 着 以 下 
的 规则 : 

党 ”如果 第 一 个 操作 数 是 对 象 , 则 返回 第 二 个 操作 数 的 值 ; 

学” 如果 第 二 个 操作 数 是 对 象 , 则 只 有 第 一 个 操作 数 判断 为 true 时 才 返 回 这 个 
对 象 。 


党 ”如 果 两 个 操作 数 都 为 对 象 , 则 返回 第 二 个 对 象 。 
与 运算 规则 实现 如 代码 清单 2 - 12 所 示 。 


代码 清单 ”2 -12 
console. log( " string" && false) ; //false 
console. log( " string" && true); //true 
console. log( true && 123456); //123456 
console. log(false && 123456); //false 
console. log( " string1" && "string2"); / /"string2" 


规则 中 的 对 象 并 不 仅仅 是 指 对 象 类 型 ,在 JavaScript 中 所 有 的 事物 都 是 对 象 ,因此 对 
字符 串 和 数值 类 型 也 适用 ,如 上 面 的 例子 所 示 。 
3. 逻辑 或 
逻辑 或 运算 符 由 两 条 竖 线 ( 11) 表 示 , 其 运算 规则 如 表 2 -5 所 示 。 
表 2 -5 逻辑 或 规则 


第 一 个 位 第 二 个 位 结果 
false false false 
false true true 
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续 表 
第 一 个 位 第 二 个 位 结果 
true false true 
true true true 


逻辑 或 操作 也 属于 短路 操作 , 即 一 旦 可 以 确定 结果 后 ,后 面 的 操作 都 不 执行 ,而 是 直 
接 返 回 结果 。 当 第 一 个 操作 数 判 断 为 false 时 ,由 于 需要 第 二 个 操作 数 才能 得 到 最 终结 
果 , 所 以 会 继续 进行 第 二 个 操作 数 ;如 果 第 一 个 操作 数 判断 为 true ,那么 无 论 第 二 个 操作 
数 是 什么 ,结果 都 为 rue, 因 此 “偷懒 "直接 返回 结果 true。 

同样 的 ,逻辑 或 的 返回 结果 并 不 只 是 布尔 值 ,还 可 能 是 对 象 , 它 遵守 着 以 下 的 规则 ; 

党 ”如果 第 一 个 操作 数 是 对 象 , 则 返回 第 一 个 操作 数 的 值 ; 

党 ”如 果 第 二 个 操作 数 是 对 象 , 则 只 有 第 一 个 操作 数 判断 为 false 时 才 返 回 这 个 
对 象 。 

学 ”如 果 两 个 操作 数 都 为 对 象 , 则 返回 第 一 个 对 象 。 

逻辑 或 返回 对 象 的 特性 在 实际 编程 中 用 处 非常 大 ,可 以 利用 这 一 行为 避免 赋值 null 
或 undefined ,或 者 是 避免 对 空 对 象 进行 操作 ,实现 如 代码 清单 2 -13 所 示 。 


代码 清单 ”2 -13 
console. log( null 11 "string"); //string 
console. log( undefined || "string"); //string 
console. log( null 11 10); //10 


var object = getObjectByFun() || otherObject; 


最 后 一 行 就 是 最 常 使 用 的 方式 ,通过 一 个 函数 取得 对 象 ,但 是 不 知道 是 否 能 正确 返 
回 对 象 。 如 果 返 回 null 或 者 其 他 无 意义 的 对 象 ,那么 逻辑 或 运算 符 继续 进行 ,最 终 赋 值 
otherObject 备用 的 对 象 。 


2.4.8 条 件 运 算 符 


条 件 运算 符 是 三 目 运算 符 , 它 由 一 个 问号 (?) 和 冒号 ( : ) 组 成 ,形式 如 下 。 

var value = boolean_expression ? true_value : false_value; 

它 的 作用 是 通过 判断 boolean_expression 的 真 假 来 返回 给 定 的 其 中 一 个 值 ,如 果 bool- 
ean_expression 返回 true ,那么 表达 式 返回 tue_value; 反 之 返回 false_value。 当 需要 判断 
真 假 来 为 一 个 变量 赋值 的 时 候 ,条 件 运 算 符 提供 了 非常 大 的 方便 。 

如 果 要 求 出 两 个 值 中 的 较 大 值 ,可 以 这 么 做 : 

ee 
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var max = value1 > value2 ? value1 : value2; 

先 判断 两 个 值 的 相对 大 小 ,如 果 返 回 tue, 证 明 valuel 较 大 ,于 是 返回 valuel; 反 之 
value2 较 大 则 返回 value2。 这 条 表达 式 中 ,由 于 条 件 运算 符 的 优先 度 要 小 于 > 运算 符 
的 ,因此 不 写 括号 也 不 成 问题 ,下面 再 来 看 一 个 例子 : 

Varimax = a >b?(a >678:0: (b> 06?b:o); 

上 述 代码 意义 是 :首先 对 问号 前 的 表达 式 求 真 假 。 如 果 a 大 于 b, 那 么 进入 问号 后 的 
第 一 条 表达 式 中 ,可 见 表 达 式 (a > ec ? a : c) 的 意思 就 是 求 a 和 c 中 的 较 大 值 。 如 果 a 
小 于 b, 那 么 进入 问号 的 第 二 条 表达 式 中 ,可 见 表达 式 (b > c ? b : e) 的 意思 就 是 求 b 和 
c 中 的 较 大 值 。 因 此 两 条 分 支 都 是 用 a 和 b 中 的 较 大 者 再 与 e 做 大 小 比较 ,最 终结 果 取 
到 三 者 中 的 最 大 者 。 


2.4.9 位 操作 运算 符 


在 内 存 中 保存 的 数值 都 是 以 二 进 制 码 的 形式 来 存储 的 ,在 JavaSeript 中 对 于 有 符号 
的 整数 ,前 31 位 用 于 表示 整数 的 值 ,而 第 32 位 用 于 表示 数值 的 符号 ,其 中 0 表示 整数 ,1 
表示 负数 。 因 此 一 个 正 数 的 存储 是 将 其 转化 为 二 进 制 以 后 再 存储 在 32 位 中 ,例如 十 进 
制 数 5 可 以 转化 为 二 进 制 数 101 ,其 中 的 相关 数学 知识 可 以 查阅 其 他 书目 。 因 此 十 进 制 
数 5 在 内 存 中 的 存储 二 进 制 码 为 00000000000000000000000000000101。 

而 负数 的 存储 形式 不 一 样 ,负数 是 用 二 进 制 补 码 来 存储 数值 。 补 码 即 先 求 出 数值 绝 
对 值 的 二 进 制 码 ,再 将 二 进 制 取 反 , 即 0 替换 为 1 ,1 替换 为 0, 最 后 把 二 进 制 反 码 加 1。 得 
到 补 码 。 

以 下 是 求 负数 -5 的 二 进 制 补 码 , 先 求 数值 5 的 二 进 制 码 

0000 0000 0000 0000 0000 0000 0000 0101 

将 二 进 制 码 取 反 ,0 和 1 相互 替换 

1111 1111 1111 1111 1111 1111 1111 1010 

在 二 进 制 反 码 基础 上 加 1, 得 到 二 进 制 补 码 

a “天下 下 全 到 玫 玫 让， 半 人 全 让 

在 理解 了 数值 保存 的 二 进 制 形式 后 ,就 可 以 利用 位 操作 运算 符 直接 对 数值 进行 修 
改 , 要 知道 的 是 位 操作 运算 相 比 于 算术 运算 符 要 快 得 多 。 

1. 按 位 非 

按 位 非 运 算 符 是 用 一 条 波浪 线 ( ~ ) 表 示 ,为 单 目 运算 符 , 使 操作 符 的 二 进 制 码 取 反 ，， 
实现 如 代码 清单 2 -14 所 示 。 
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代码 清单 ”2 -14 
var num = 5; 
console. log( num); //5 
console. log( ~ num); //-6 


可 见 取 反 后 输出 结果 为 -6, 现 在 来 计算 一 下 是 否 正确 。 
从 上 述 讨论 中 可 知 数值 5 的 反 码 为 
1111 1111 1 1 1111 111 1111 1010 


如 果 把 这 个 二 进 制 码 看 作 补 码 来 求 其 对 应 的 负数 ,那么 利用 补 码 步骤 的 相反 操作 来 
求 其 对 应 的 数值 。 


首先 将 补 码 减 去 1 变 回 反 码 

1111 1111 1 1111 1111 1111 1111 1001 

再 将 反 码 取 反 , 即 可 得 到 数值 对 应 的 二 进 制 码 

0000 0000 0000 0000 0000 0000 0000 0110 

通过 换算 可 知 , 上 述 的 二 进 制 码 就 是 十 进 制 数 6, 因 此 结果 所 示 的 反 码 代表 的 数值 为 
-6。 

2. 按 位 与 

按 位 与 操作 运算 符 由 一 个 字符 (&) 表 示 , 是 一 个 双 目 操作 符 , 它 使 得 两 个 操作 数 每 
一 个 对 应 位 取 按 位 与 (AND ) , 按 位 与 的 规则 如 表 2 -6 所 示 。 

表 2 -6 按 位 与 ( AND ) 规则 


第 一 个 位 第 二 个 位 结果 
0 0 0 
0 1 0 
1 0 0 
1 1 1 


这 里 要 提 的 一 点 是 , 按 位 与 可 用 于 一 个 数 的 取 模 。 但 是 这 个 取 模 对 数值 规定 为 : 取 
模 数 必须 是 2 的 次 客 数 才能 够 运算 正确 , 即 取 模 数 要 求 为 2.4 .8`.16…… 做 法 是 ,如 果 取 
模 数 为 8, 那 么 用 “&7( 即 8 -1) ”可 以 达到 同样 的 效果 ,至 于 其 中 的 数学 证 明 已 经 超出 了 
本 书 范围 。 而 为 什么 不 直接 取 模 ,而 非 要 在 这 人 么 苛刻 的 条 件 下 使 用 按 位 与 取 模 ? 当然 这 
不 是 硬性 规定 ,只 不 过 位 操作 速度 快 ,在 必要 的 时 刻 可 以 提供 一 种 快速 解决 问题 的 方法 。 
以 下 给 出 取 模 例子 ,实现 如 代码 清单 2 -15 所 示 。 
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代码 清单 ”2 -15 
console. log(10 % 4); //2 
console. log(10 & 3); /2 
console. log(21 % 8); //5 
console. log(21 & 7); //5 


console. log(105 % 16); //9 
console. log( 105 & 15); //9 
console. log(55 % 6); //1 
console. log(55 & 5); WE 


可 见 取 模 数 为 4.8 .16 等 2 的 次 寡 时 ,运算 结果 都 正确 ,而 取 模 数 为 6 时 (不 是 2 的 次 


埋 ) ,运算 结果 就 未 必 正 确 了 。 
3. 按 位 或 


按 位 或 运算 符 由 一 个 竖 线 符号 ( 1) 表示 ,是 一 个 双 目 运算 符 , 它 使 得 两 个 操作 数 每 一 


个 对 应 位 取 按 位 或 (OR) , 按 位 或 的 规则 如 表 2 -7 所 示 。 
表 2 -7 按 位 或 ( OR) 规则 


第 一 个 位 第 二 个 位 结果 
0 0 0 
0 1 | 
1 0 1 
1 1 | 


按 位 或 也 经 常 使 用 在 取 整 的 用 途上 ,可 以 用 0 与 一 个 浮 点 数值 按 位 或 ,结果 相当 于 
去 除 小 数 ,只 保留 整数 数值 。 要 注意 这 里 的 取 整 并 不 是 四 舍 五 人 ,而 只 是 单单 地 去 除 小 


数 ,实现 如 代码 清单 2 - 16 所 示 。 


代码 清单 ”2 -16 
console. log(1. 125 | 0); //1 
console. log(1.9 | 0); i 
var num1 = 1.125, num2 = 1.9; 
console. log( (num1 + 0.5) 10); //1 
console. log( (num2 + 0.5) | 0); //2 


无 论 小 数 是 大 于 5 还 是 小 于 5 ,一 律 去 除 不 进位 。 如 果 和 希望 能 够 有 四 舍 五 人 的 取 整 
功能 ,那么 在 按 位 或 之 前 先 加 上 0.5 ,这 样 的 技巧 就 起 到 了 四 舍 五 人 的 功能 。 
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4. 按 位 异 或 
按 位 异 或 运算 符 由 一 个 符号 (“) 表示, 是 一 个 双 目 运算 符 , 它 使 得 两 个 操作 数 每 一 个 
对 应 位 取 按 位 异 或 (XOR ) , 按 位 或 的 规则 如 表 2 -8 所 示 。 
表 2 -8 按 位 异 或 (XOR ) 规则 


第 一 个 位 第 二 个 位 结果 


0 0 
0 1 
1 0 
1 


0 
1 
h 
1 0 

按 位 异 或 的 规则 是 : 当 两 个 为 相同 时 (都 为 0 或 都 为 1) 返 回 0, 当 两 个 位 不 相同 时 
(一 个 为 1, 另 一 个 为 0) 返 回 1。 

5. 左 移 和 右 移 

左 移 操作 符 由 两 个 小 于 号 ( < < ) 表 示 , 是 双 目 运算 符 , 它 使 得 位 于 左边 的 操作 数 的 
二 进 制 码 向 左 移动 指定 的 位 数 ,而 左 移 后 右边 末端 空 出 的 位 以 0 补 齐 。 同 样 也 有 右 移 操 
作 符 ( > > ) 和 无 符号 右 移 操作 符 ( > > > ) 。 

例如 将 数值 3 左 移 2 位 ,结果 将 是 12 ,操作 过 程 如 下 。 

数值 3 的 二 进 制 码 为 11 

向 左 移动 2 位 后 为 1100 

可 见 二 进 制 码 1100 代表 的 数值 为 12。 

右 移 操作 符 ( > > ) , 左 移 1 位 其 实 就 相当 于 乘 上 一 个 2 的 次 客 , 右 移 1 位 相当 于 除 
以 一 个 2 的 次 短 。 所 以 左 移 2 位 相当 于 乘 以 2 的 2 次 方 。 

右 移 操作 符 由 两 种 形式 ,一 个 是 有 符号 右 移 ( > > ) ; 另 一 个 是 无 符号 右 移 ( > > > )。 还 
记得 前 面 提 到 过 ,存储 的 32 位 中 第 32 位 是 符号 位 ,0 表示 正 数 ,1 表示 负数 。 因 此 在 右 移 
的 过 程 中 ,左边 末端 空 出 的 位 的 补 齐 方式 有 别 。 

有 符号 右 移 ( > > ) 则 保留 符号 位 ,如 果 符 号 位 为 1, 则 右 移 后 补 齐 的 位 也 为 1 ,如 果 
符号 位 是 0, 补 齐 位 也 为 0。 

无 符号 右 移 ( > > > ) 则 不 管 符号 位 ,一 律 以 0 来 补 齐 末 端的 空位 。 因 此 在 右 移 整数 
时 ,两 者 的 行为 一 致 ,一 旦 右 移 负数 时 ,两 者 得 到 的 结果 则 有 很 大 区 别 , 实 现 如 代码 清单 2 
一 17 所 示 。 


代码 清单 ”2 -17 
console. log(6 > > 1); //3 
console.log(6 > > > 1); //3 
console. log( -6 > > 1); //-3 
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console.log( -6 > > > 1); //2147483645 


可 见 正 数 右 移 1 位 没有 区 别 ,都 相当 于 除 以 一 个 2 的 次 宕 (此 例 为 2 的 1 次 方 ) 。 

有 符号 右 移 作用 于 负数 时 ,由 于 保留 了 符号 位 ,所 以 补 齐 1 以 后 ,结果 还 是 相当 于 除 
以 个 2 的 次 震 。 但 是 无 符号 右 移 用 0 补 齐 末 端 ,因此 符号 位 变 为 0, 剩 下 的 二 进 制 代码 可 
以 算出 来 结果 ,读者 可 以 自己 验算 一 下 。 


2.4.10 其 他 运算 符 


1. 逗号 运算 符 

逗号 运算 符 用 逗号 ( , ) 表 示 , 它 的 作用 是 让 逗号 两 边 的 表达 式 按 顺序 进行 , 见 下 面 的 
定义 和 赋值 例子 。 

var Num1 = 123，num2 = 456, Num3; 

在 上 述 的 定义 变量 中 ,用 逗号 隔 开 了 不 同 的 变量 ,使 得 一 个 var 关键 字 中 可 定义 多 个 
变量 并 赋 不 同 的 值 。 

逗号 运算 符 也 有 返回 结果 , 它 的 返回 值 是 逗号 运算 符 中 最 后 的 那 条 表达 式 的 值 , 见 
下 面 的 例子 。 

var num = (1, "string", true, 123); //num 最 终结 果 为 123 

2. 成 员 选 择 运算 符 

成 员 选择 运算 符 用 一 点 (. ) 表 示 , 其 作用 是 获取 对 象 的 属性 和 方法 。 比 如 在 Object 
类 型 一 节 中 看 到 过 的 ,如 果 有 一 个 对 象 people ,其 中 有 name 属性 ,age 属性 等 ,通过 “对 象 
实例 +“. "+ 属性 名 "获取 相应 属性 的 值 , 如 以 下 例子 。 

people. name = "XiaoMing" 

people. age = 18; 

3. 下 标 运算 符 

下 标 运算 符 用 一 对 中 括号 [ ] 表示, 用 于 获取 数组 元 素 或 者 是 对 象 中 的 属性 ,如 以 下 
例子 。 

array[5] = ..... 

people[ "name"] = ......; 

4. 图 数 调用 运算 符 

函数 调用 运算 符 用 一 对 小 括号 ( ) 表 示 , 用 于 调用 指定 函数 ,如 以 下 例子 。 

SayHello( ) ; 

5. new 和 delete 

new 运算 符 用 于 创建 一 个 对 象 的 实例 ,delete 用 于 删除 一 个 数组 元 素 或 者 是 一 个 对 
象 的 属性 ,如 下 例子 。 
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var people = new People(); 

delete array[ 3]; 

delete people[ "name"]; 

6. typeof 运算 符 

typeof 运算 符 用 于 返回 一 个 操作 数 的 类 型 ,实现 如 代码 清单 2 - 18 所 示 。 


代码 清单 ”2 -18 
console. log( typeof 123); //number 
console. log( typeof " Hello" ); //string 
console. log( typeof true) ; //boolean 
console. log( typeof undefined) ; //undefined 
console. log( typeof null) ; //object 
var 0 = new Object(); 
console. log( typeof 0); //object 
var func = function(){}; 
console. log( typeof func) ; //function 


可 见 返 回 的 类 型 与 之 前 介绍 到 的 数据 类 型 有 细微 差别 ,其 中 注意 到 null 值 的 类 型 是 
object, 并 不 是 null。 在 逻辑 的 角度 上 考虑 ,null 表示 一 个 空 对 象 的 指针 ,所 以 null 的 类 型 
返回 object 似乎 也 是 符合 逻辑 。 

最 后 的 表达 式 中 定义 了 一 个 函数 ,用 typeof 运算 符 时 指出 了 这 个 变量 是 一 个 function 
函数 ,有 关 函 数 的 知识 将 在 第 4 章 中 讲述 。 

7. instanceof 运算 符 

instanceof 运算 符 的 用 途 是 检测 一 个 对 象 是 不 是 某 个 类 型 的 实例 ,并 且 返 回 布尔 值 。 
而 且 instanceof 还 能 够 通过 原型 链 搜 寻 到 上 层 之 中 ,检测 一 个 对 象 是 否 继 承 于 某 个 类 型 。 
有 关 原 型 链 和 继承 的 知识 将 在 第 6 章 中 讲述 ,instanceof 运算 符 的 实现 例子 如 代码 清单 2 
-19 所 示 。 


代码 清单 ”2 -19 
var People = function () {}; 
var Student = function () {}; 
Student. prototype = new People(); 
var people = new People(); 
console. log( people instanceof Object) ; //true 
console. log( people instanceof People); //true 
console. log( people instanceof Student) ; //false 


var student = new Student(); 
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console. log( student instanceof Object) ; //true 
console. log( student instanceof People) ; //true 
console. log( student instanceof Student) ; //true 


先 定义 一 个 People 类 型 ,并 且 定 义 Student 通过 原型 链 方式 继承 与 People 父 对 象 。 
下 面 分 别 创建 一 个 People 类 的 实例 people 和 Student 类 的 实例 student( 注意 统一 使 用 大 
写字 母 开头 的 名 字 作 为 构造 函数 名 ,小 写字 母 开 头 为 变量 ) ,并 对 它们 使 用 instanceof 操 
作 符 ,输出 结果 如 上 所 示 。 

由 于 所 有 自 定义 的 对 象 都 默认 继承 于 Object 类 型 ,因此 都 返回 true 值 。 

people 检测 Student 类 的 时 候 返 回 false, 这 个 也 很 容易 理解 :Student 的 对 象 可 以 有 
People 的 方法 ,但 是 People 的 对 象 不 一 定 有 Student 的 方法 ,所 以 people 不 属于 
Student 类 。 

最 后 student 都 能 够 检测 到 Object 和 People 都 是 它 的 父 对 象 , 因 此 都 返回 bue。 

可 以 利用 这 个 instanceof 操作 符 来 检测 一 个 对 象 是 不 是 某 个 类 型 或 继承 于 某 个 父 对 
象 的 实例 。 


2.5 小 结 


本 章 详细 讲述 了 JavaScript 中 的 编程 规范 和 基本 语法 ,以 下 是 有 关 的 编程 规范 。 

党 ”支持 单行 注释 和 多 行 注释 。 

学 ”命名 区 分 大 小 写 , 字 符 有 规定 限制 ,并且 不 能 使 用 关键 字 作为 变量 名 。 

党 ”变量 是 弱 类 型 , 即 声明 一 个 变量 无 须 指定 变量 存储 的 类 型 。 

学 ”变量 的 作用 域 ,函数 内 的 变量 不 能 被 外 部 访问 ,并且 在 JavaScript 中 没有 括号 作 
用 域 。 

JavaScript 中 有 5 种 基本 数据 类 型 ,分 别 是 Undefined 类 型 Null 类 型 Number 类 型 、 
Boolean 类 型 和 String 类 型 ,另外 还 有 引用 类 型 Object 类 型 。 类 型 之 间 可 以 相互 转化 ,但 
是 要 遵守 着 一 定 的 转化 规则 。 

JavaScript 中 的 运算 符 可 分 为 有 单 目 运算 符 (只 有 1 个 操作 数 ) 、 双 目 元 算 符 (2 个 操 
作 数 ) 和 三 目 运算 符 (3 个 操作 数 ) 。 除 此 以 外 ,运算 符 还 有 优先 级 和 结合 性 之 分 ,优先 级 
决定 了 运算 符 执行 的 先后 顺序 ,结合 性 决定 了 运算 符 两 边 的 表达 式 的 执行 顺序 。 有 具体 规 
则 可 以 参照 表 2 -3。 如 果 要 改变 运算 法 的 执行 顺序 ,可 以 适当 加 上 括号 ( ) 以 改变 运算 的 
顺序 。 

运算 符 除 了 可 以 作用 于 数值 类 型 以 外 ,还 能 够 作用 与 其 他 类 型 ,其 中 的 运算 符 行 为 
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也 会 按照 所 作用 的 具体 类 型 而 有 所 不 同 。 当 作用 于 两 个 不 同类 型 的 时 候 , 即 把 类 型 进行 
转化 后 再 运算 。 


2.6 习题 


1. Javascript 中 可 以 用 哪 两 种 方法 注释 ? 

2. 以 下 那个 选项 的 变量 名 不 合法 ? 

A._name 

B. $ age 

C. 123abe 

D. Student 

3. 以 下 哪 种 类 型 不 是 Javascript 基本 数据 类 型 ? 

A. Null 

B. Number 

C. Object 

D. Undefined 

4. 以 下 哪个 常量 数值 最 大 ? 

A.45 

B. 0x32 

C.058 

D.061 

5. 下列 算 符 中 哪个 运算 符 的 优先 级 最 高 ? 

四 冯 去 

| 二 

他 .入 

D.% 

6. 表达 式 6+5 *4/2 的 结果 是 。 

7. 若 x=5, 运 行 表 达 式 x+ =3+5 后 x 的 值 是 o 
8. 二 进 制 0101 与 二 进 制 1100 的 按 位 与 (&) 的 二 进 制 结果 是 。 
9. 表 达 式 3 < <2 的 结果 是 

10. 表达 式 (7 > =7)&&(5! =2) 的 结果 是  __，。 
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第 3 音 ”基本 流程 控制 


JavaScript 中 规定 了 一 组 语句 来 控制 程序 的 运行 流程 ,其 中 包括 选择 结构 语句 和 循环 
结构 语句 。 选 择 结构 语句 又 包括 让 语句 和 switch 语句 ;循环 结构 语句 又 包括 while 语句 、 
do - while 语句 和 for 语句。 每 条 语句 都 对 应 着 不 同 的 执行 流程 ,其 中 有 些 语句 还 可 以 相 
互 替换 使 用 。 


3.1 这 语 名 


1. 计 -else 语句 


让 语句 利用 判定 条 件 来 控制 程序 执行 的 方向 ,从 而 控制 程序 流程 ,其 控制 流程 图 如 图 


3 -1 所 示 。 
true < > false 
语句 1 | 语句 2 
后 续 语 句 
3 -1 让 语句 流程 图 
其 中 语法 如 下 。 


if ( condition) statement1 else statement2 
其 中 condition 为 判定 条 件 , 可 以 是 任意 表达 式 , 最 终结 果 将 会 自动 转化 为 布尔 值 ,其 
转换 规则 按照 第 2 章 中 表 2 - 1 所 示 。 如 果 判 定 条 件 为 tue, 那么 执行 statementl (语句 
1) ,否则 若 判定 条 件 为 false ,执行 statement2( 语 句 2) 。 注 意 的 是 statement 语句 可 以 为 单 
独 一 行 代码 ,也 可 为 用 大 括号 括 起 来 的 多 行 代码 。 
下 面 给 出 简单 例子 ,利用 让 -else 语句 来 筛选 两 值 中 的 较 大 值 ,实现 如 代码 清单 3 -1 
em 
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所 示 。 


vara = 3, b = 5, max; 


if (a > b) 
max = ai 
else 
max = b; 
console. log(max) ; m5 


可 见 输出 结果 为 5。 在 让 -else 语句 中 ,要 么 执行 第 一 条 语句 ,要 么 执行 第 二 条 ,不 可 
能 同时 执行 或 者 两 条 都 不 执行 。 

在 让 语句 中 可 以 继续 使 用 站 语句 ,而 这 样 做 达到 的 目的 效果 就 是 多 重 分 支 结构 ,其 
语法 形式 如 下 。 

if (condition1) statement1 

else if (condition1) statement2 

else if (condition1) statement3 

else if (condition1) statement4 

else if (condition1) statement5 

else statement6 

利用 多 重 分 支 结构 来 检测 一 个 数值 的 范围 ,实现 如 代码 清单 3 -2 所 示 。 

代码 清单 ”3 -2 


var a = 250; 
if (a > 300) 
console. log("a 大 于 300"); 
else if (a > 200) 
console. log("a 大 于 200, 小 于 300"); // 输 出 "a 大 于 200, 小 于 300" 
else if (a > 100) 
console. log("a 大 于 100, 小 于 300"); 
else 


console. log("a 小 于 100"); 


利用 这 个 多 重 证- else 分 支 语句 ,可 以 根据 一 个 具体 条 件 做 出 大 于 2 种 的 不 同行 为 。 
不 过 在 后 面 会 提 到 switch 语句 ,其 功能 与 多 重 if - else 分 支 语句 类 似 ,但 是 switch 语句 代 
码 清晰 ,所 以 需要 利用 到 多 重 分 支 的 时 候 ,应 该 优先 使 用 switch 语句 。 
2. 让 与 else 的 配对 关系 
Ne 


人 Ep 
HTML5 交 去 动 画 开 发 朗 跨 数 宣 
如 果 在 分 支 语句 中 骨 套 使 用 站 语句 ,那么 对 于 初次 接触 让- else 语句 的 读者 来 说 容 
易 被 它们 之 间 的 配对 关系 迷惑 。 
需要 注意 的 是 :else 总 是 与 它 上 面 的 最 近 的 未 形成 配对 的 让 配对 。 下 面 通过 一 个 例 
子 来 讲述 它们 的 配对 关系 ,实现 如 代码 清单 3 -3 所 示 。 
代码 清单 ”3 -3 


varx = 5; 
if (x > 10) 
if (x > 20) 
console. log("x 大 于 20"); 
else 


console. log("x 小 于 10"); 


上 面 的 代码 中 ,结果 会 输出 哪 条 控制 台 消息 呢 ? 实际 是 两 条 都 没有 输出 。 在 第 一 条 
让 语句 中 ,条 件 为 false, 所 以 不 应 该 执行 else 中 语句 吗 ? 

这 是 非常 多 初学 者 会 犯 的 一 个 错误 ,要 记 住 :else 总 是 与 它 上 面 的 最 近 的 未 配对 的 让 
配对 。 因 此 在 上 面 的 代码 中 ,else 实际 上 跟 第 二 条 if 配对 了 ,所 以 该 程序 的 流程 图 如 
图 3 -2 所 示 。 


“x 大 于 20” > “小 于 10” 


3 -2 实际 流程 图 


尽管 上 面 的 else 错位 成 与 第 一 条 站 相同 的 头 位 置 ,但 是 代码 解析 时 只 遵守 内 在 的 规 
则 ,而 代码 对 齐 的 目的 只 是 为 了 增加 代码 可 读 性 ,正确 改写 的 代码 如 代码 清单 3 -4 
所 示 。 
代码 清单 ”3 -4 


Varx = 5; 
if (x > 10) { 
if (x > 20) 


a 
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console. log("x 大 于 20"); 
外 
else 
console.log("x 小 于 10"); // 输 出 x 小 于 10 


用 大 括号 把 第 二 条 站 括 起 来 ,解析 时 把 括号 里 面 的 当成 一 条 语句 ,把 第 二 条 让 和 else 
的 配对 关系 断 开 了 ,因此 else 成 功 与 第 一 条 if 配对 。 

通过 例子 可 以 了 解 到 ,else 遵循 就近" 原则 ,总 是 与 上 一 个 未 配对 的 站 配对 起 来 ,如 
果 想 要 断 开 配对 ,用 大 括号 把 希望 执行 的 语句 括 起 来 即 可 。 

3. 没有 else 部 分 的 让 语句 

从 上 面 的 例子 中 也 可 以 知道 ,让 语句 可 以 没有 else 部 分 ,此 时 只 会 执行 条 件 为 true 的 
语句 , 若 条 件 为 false, 则 什么 都 不 做 。 这 种 做 法 经 常用 于 对 某 些 特定 条 件 添加 行为 ,例如 
在 得 到 一 个 数 之 后 ,希望 这 个 数 总 是 不 大 于 一 个 最 大 值 。 若 大 于 , 则 赋值 为 最 大 值 ,否则 
什么 也 不 做 ,实现 例子 如 代码 清单 3 -5 所 示 。 

代码 清单 ”3 -5 


varx=10>5?10:5; 
if (x > 7) 
Xx =7; 


console. log( x); /AT 


上 面 的 例子 实际 上 是 没有 意义 ,但 是 在 实际 编程 中 ,可 能 会 通过 一 个 函数 得 到 一 个 
数值 ,不 知道 数值 的 确实 大 小 ,所 以 这 时 候 就 可 以 利用 让 语句 来 进行 判定 并 作出 修改 
行为 。 

4. 语句 组 

让 语句 中 只 会 执行 分 支 中 的 一 行 语句 ,那么 当 在 分 支 中 需要 执行 多 条 语句 时 ,就 需要 
用 大 括号 | } 把 需要 执行 的 所 有 语句 都 括 起 来 ,这 样 做 就 是 让 括号 中 的 所 有 语句 在 语法 上 
看 作为 一 条 语句 , 即 语句 组 。 没 有 被 括号 包围 的 语句 都 当 作为 后 续 语 句 。 给 出 下 面 的 例 
子 来 观察 输出 信息 ,实现 代码 如 代码 清单 3 -6 所 示 。 


代码 清单 ”3 -6 
if (false) // 没 有 括号 括 住 
console. log( "语句 1"); 
console. log( "语句 2"); // 输 出 "语句 2" 
console. log( "语句 3"); // 输 出 "语句 3" 
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以 上 代码 中 会 输出 后 面 两 条 语句 。 因 为 证 语句 之 后 并 没有 用 大 括号 把 三 条 语句 括 
住 ,所 以 即使 过 语句 判断 不 会 通过 ,也 只 有 第 一 条 语句 不 执行 ,其 余 两 条 语句 作为 后 续 语 
名 正常 执行 。 
尽管 在 需要 执行 多 条 语句 时 才 需 要 添加 大 括号 ,但 是 在 编程 过 程 中 建议 始终 都 使 用 
括号 把 分 支 语句 括 起 来 ,因为 这 样 有 助 于 理解 代码 ,防止 因 漏 掉 括 号 而 导致 执行 结果 不 
正确 ,提高 代码 可 读 性 。 


3.2 ”switch 语 


在 需要 执行 多 重 分 支行 为 的 时 候 , 往 往 会 适用 switch 语句 。 虽 然 从 效果 上 来 说 使 用 
多 重 if - else 语句 和 switch 语句 是 一 致 的 ,但 是 switch 语句 更 能 表达 编程 人 员 的 意思 , 表 
明代 码 的 作用 是 用 于 对 某 个 条 件 作 出 多 重 分 支行 为 。 

其 中 语法 如 下 。 

switch (expression) { 

case value1 : statement1 
break; 

case value2 : statement2 
break; 

case value3 : statement3 
break; 

default : statement4 

} 

其 中 作为 判断 的 不 再 是 condition( 条件 ) ,而 是 一 条 expression( 表达 式 ) ,后 面 case 的 
含义 ,是 指 如 果 expression 的 值 等 于 相应 的 value 值 ,那么 便 会 执行 case 后 的 语句 。 而 关 
键 字 default 则 用 于 在 表达 式 的 值 跟 所 有 case 都 不 匹配 时 , 则 执行 default 后 的 语句 。 

还 可 以 看 到 新 的 关键 字 break , 它 的 作用 是 相当 于 跳出 当前 的 switch 语句 ,接着 执行 
之 后 的 后 续 语 句 。 如 果 省 略 掉 break 关键 字 ,那么 执行 完 当 前 case 的 语句 后 ,还 会 继续 往 
下 执行 其 他 case 的 语句 ,直到 遇 到 break 关键 字 或 switeh 语句 结束 。 初 学 者 经 常会 忘记 
添加 break 语句 ,所 以 要 注意 一 下 。 

给 出 下 面 switch 基本 用 法 的 例子 ,实现 如 代码 清单 3 -7 所 示 。 

代码 清单 ”3 -7 


var num = 5; 
Switch (num) { 


case3 : 


a 


A 
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console. log( "数值 为 3"); 
break; 
case4: 
console. log( "数值 为 4"); 
break; 
Case5: 
console. log( "数值 为 5") ; // 输 出 "数值 为 5" 
break; 
default : 
console. log(" 其 他 数 "); 


switch 将 判断 num 的 数值 ,检查 到 5 以 后 跳 转 到 case 5 的 语句 中 并 执行 其 中 的 语句 。 
遇 到 break 关键 字 后 便 跳出 switch 语句 ,不 再 执行 其 他 的 分 支 语 句 。 

在 switch 语句 中 加 入 break 语句 可 以 避免 同时 执行 多 条 case 中 的 语句 ,但 是 假如 需 
要 把 几 种 不 同 case 情况 作 统一 处 理 ,那么 可 以 有 意识 地 省 略 掉 break 关键 字 ,使 不 同 case 


都 执行 相同 部 分 的 语句 。 
但 是 在 这 么 做 的 同时 最 好 添加 好 相应 注释 ,好 让 其 他 的 代码 阅读 者 知道 你 的 意图 ， 
也 为 自己 日 后 维护 代码 提供 了 方便 。 


下 面 省 略 break 的 例子 经 常用 于 检查 键盘 哪个 键 被 按 了 ,实现 如 代码 清单 3 -8 
所 示 。 
代码 清单 ”3 -8 


var key = a’ 
switch (key) { 
case a': case A': 
console. log(" 按 下 a 键 "); 
break; 
case b': case B': 
console. log(" 按 下 Cc 键 "); 
break; 
case C : case 'C' : 
console. log(" 按 下 C 键 "); 
break; 
default : 
console. log(" 按 下 其 他 键 "); 
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利用 switch 语句 检查 按 下 的 键 key, 其 中 对 应 大 小 写字 母 的 case 之 间 不 添加 break， 
因此 无 论 哪 种 状态 被 按 下 ,都 将 跳 到 对 应 的 case 中 并 执行 相应 的 语句 。 
跟 C 语言 不 同 ,switch 中 可 以 使 用 任何 数据 类 型 ,所 以 除了 数值 类 型 和 单个 字符 以 
外 ,还 可 以 用 一 个 字符 串 来 判别 ,看 以 下 例子 ,实现 如 代码 清单 3 -9 所 示 。 


代码 清单 ”3-9 
var str = hello' 
Switch (str) { 
case Hello : 
console. log( "大 写 你 好 ") ; 
break; 
case hello' : 
console.log( "你 好 "); 。// 输 出 "你 好 " 
break; 
case Wworld' : 


console. log( "世界 "); 
break; 

default : 
console. log(" 其他"); 


上 面 是 用 字符 串 作 为 判定 表达 式 ,可 以 看 到 case 中 有 两 个 “hello” ,不 过 其 中 有 一 个 
首 字母 的 大 写 的 H, 结 果 输 出 表明 跳 转 到 了 小 写 h 的 “hello ”分支 上 。 原 因 是 字符 串 区 分 
大 小 写 。 
而 且 在 JavaScript 中 ,更 有 特色 的 是 :case 的 对 应 值 不 仅 可 以 是 常量 和 变量 ,还 可 以 
是 表达 式 。 在 判别 时 先 计算 出 表达 式 的 值 ,再 检测 是 否 对 应 。 有 了 这 个 特性 ,在 JavaS- 
cript 中 可 以 有 以 下 “奇怪 "的 操作 ,实现 代码 如 代码 清单 3 - 10 所 示 。 
代码 清单 ”3 -10 


var num = 250; 
Switch (true) { 
case num < 200 : 
console. log( "num 小 于 200"); 
break; 
case num > = 200 && num < 300 : 
console. log( "num 大 于 200, 小 于 300"); /输出 "num 大 于 200, 小 于 300" 
break; 


el 
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default : 
console. log( "其 他 "); 


上 面 的 例子 给 switch 传达 一 个 布尔 常量 true ,这 时 候 case 中 的 表达 式 就 会 按 顺 序 求 
值 ,直到 匹配 到 符合 的 case 并 执行 相应 的 语句 。 

相 比 起 上 述 例子 的 这 种 用 法 ,编者 认为 使 用 过 语 句 会 更 加 清晰 易 读 , 当然 具体 使 用 
哪 种 语句 取决 于 读者 的 喜好 。 


3.3 ”while 语 铝 


while 循环 语句 用 于 对 某 一 条 件 进 行 判定 , 当 符合 条 件 时 就 重复 执行 循环 体内 的 语 
句 ,直到 条 件 不 再 符合 。 其 流程 图 如 图 3 -3 所 示 。 


循环 体 语句 


3 -3 ”while 语句 流程 图 


while 语句 的 语法 如 下 : 

while (expression) statement 

其 中 expression 可 以 为 任意 表达 式 , 最 终 会 转化 为 布尔 值 再 作 判 定 。 如 果 判 定 结果 
为 tue ,那么 将 会 执行 循环 体 中 的 语句 ,执行 结束 后 再 次 判定 条 件 ,这 里 的 循环 体 指 的 是 
一 条 语句 或 者 用 大 括号 括 起 来 的 多 行 语句 。 如 果 结 果 为 false, 则 跳出 循环 ,执行 后 续 
语句 。 

下 面 的 例子 是 计算 式 子 1+2 +3 +…+100 的 结果 ,利用 while 循环 语句 计算 ,实现 
如 代码 清单 3 -11 所 示 。 

代码 清单 ”3 -11 


vari = 1, sum = 0; 
while (i < = 100) { 
本 了 人 


es 
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sum + = 
二 +i; 
} 
console. log(i); //101 
console. log( sum); //5050 
先 定义 i 为 1 ,结果 为 0, 然 后 开始 进入 循环 语句 中 。 先 判断 i 是 否 小 于 100 ,判定 结 


果 为 true, 所 以 进入 循环 体 中 执行 其 中 的 语句 。 运 算 符 + = 是 复合 赋值 运算 符 ,表达 意思 
即 为 sum = sum + i, 运 算 符 + + 是 自 增 运算 符 , 表 达意 思 为 1 = i + 1, 如 果 对 此 还 不 熟 
悉 的 请 翻 回 到 第 2 章 复习 一 下 。 

第 二 次 循环 式 ,i 的 值 为 2 ,因此 判定 条 件 为 true ,继续 执行 循环 体 中 的 语句 ,sum 的 值 
为 1+2+3+… 一 直 执 行 到 i 为 101 的 时 候 ,101 < 100 不 成 立 ,因此 退出 循环 。 在 结束 
循环 后 输出 i 和 sum 的 值 , 即 可 得 出 sum 的 结果 值 。 


3.4 do-while 语句 | 


循环 体 语句 


do - while 语句 也 是 用 于 循环 执行 , 它 和 while 语 
句 的 差别 在 于 do - while 是 先 执行 一 次 循环 体 中 的 语 
句 ,再 判定 条 件 。 其 流程 图 如 3 -4 所 示 。 

其 中 语法 如 下 。 

do statement while (expression) 

从 图 3 -4 流程 图 中 可 以 看 出 ,do - while 语句 至 3-4 do - while 语句 流程 图 
少 会 执行 循环 体 中 的 语句 一 次 。 即 使 判定 条 件 始 终 
为 false ,也 是 先 执行 一 次 再 判定 ,而 后 退出 循环 。 

下 面 以 do - while 语句 来 求 1+2 +3 +… +100 的 结果 ,实现 如 代码 清单 3 - 12 所 示 。 


代码 清单 ”3 -12 

vari = 1, sum = 0; 
do{ 

sum + = 

i++; 
} while (i < = 100); 
console. log(i); //101 
console. log( sum); //5050 


Gs 
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可 见 循环 体 语句 一 样 , 需 要 注意 的 地 方 while 语句 先 判定 再 执行 ,do - while 语句 先 执 
行 再 判定 。 


3.5 for 语句 


与 上 面 提 到 的 两 条 循环 语句 相 比 ,for 语句 表现 得 更 加 灵活 ,其 功能 完全 可 以 替换 掉 
while 语句 。 
其 中 语法 如 下 。 
for (expression1; expression2; expression3) statement 
注意 在 for 语句 中 , 隔 开 表达 式 的 是 分 号 ( ; ) ,并 不 是 逗号 ( , ) 。 若 表达 式 中 存在 运 
号 ,那么 将 解析 为 逗号 运算 符 。 
for 语句 的 执行 过 程 如 下 。 
1) 先 求解 expressionl 的 值 。 
2) 求 解 expression2 的 值 ,将 其 转化 为 布尔 值 以 后 判定 ,如 果 为 hue, 则 执行 循环 体 的 
语句 ,之 后 执行 第 3) 步 。 如 果 为 false, 则 跳出 循环 。 
3 ) 执 行 完 循环 体 以 后 ,求解 expression3 的 值 。 
4) 回 到 上 面 第 2) 步 循环 执行 。 
其 流程 图 如 图 3 -5 所 示 。 


| 


表达 式 1 


表达 式 3 


循环 体 语句 


3 -5 for 语句 流程 图 


for 语句 最 简单 的 应 用 形式 如 下 : 
for (循环 变量 赋值 ;判定 条 件 ; 循 环 变量 增值 ) 循环 体 
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下 面 再 次 使 用 for 语句 来 计算 算式 1 +2 +3 +… +100 的 结果 ,实现 如 代码 清单 3 - 
13 所 示 。 


代码 清单 ”3 -13 


var sum = 0; 
for(vari = 1; i <= 100; i+ +){ 


sum +=i; 
有 
console. log(i); //101 
console. log( sum); //5050 


把 用 于 自 增 的 i 放 在 了 for 语句 中 定义 ,并且 在 for 的 表达 式 3 中 自 增 1。 而 循环 语句 
因此 变 得 整洁 清晰 ,循环 体 中 只 有 一 行 语句 即 可 达到 同样 的 效果 。 
另外 ,在 for 语句 中 的 表达 式 都 是 可 以 忽略 的 ,因此 for 完全 可 以 代替 while 语句 , 实 
现 如 代码 清单 3 -14 所 示 。 
代码 清单 ”3 -14 


vari = 1, sum = 0; 
m0 t 


sum + = 

i++ 
} 
console. log(i); //101 
console. log( sum); //5050 


但 是 for 却 不 能 完全 替换 do - while, 因 为 for 语句 也 是 先 判定 再 执行 循环 体 中 的 
语句 。 

如 果 把 for 语句 中 的 判定 表达 式 也 省 略 掉 , 如 下 。 

for(;;){ 

//do something 

. 

那么 这 时 候 for 将 进行 无 限 循环 ,终止 程序 (浏览 器 ) 运行 就 必须 用 任务 管理 器 来 结 
束 了 。 


3.6 for-in 滞 铝 


for -in 语句 用 于 遍历 一 个 对 象 或 者 数组 中 的 所 有 属性 ,一 直 执行 到 对 象 中 的 所 有 属 
esis 
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性 都 遍历 完 。 在 一 个 对 象 中 ,for - in 遍历 的 是 这 个 对 象 中 的 所 有 属性 ,包括 方法 。 若 对 
象 是 一 个 数组 ,那么 遍历 的 便 是 数组 中 的 下 标 ,数组 的 属性 就 是 下 标 。 

其 语法 如 下 。 

for ( property in object) statement 

其 中 property 是 一 个 变量 ,在 遍历 过 程 中 会 将 对 象 属性 名 字 的 字符 串 返 回 到 property 
变量 , 借 此 可 以 知道 是 哪个 属性 并 获得 它 的 值 或 对 它 进 行 操 作 。 

下 面 定义 一 个 对 象 ,并 且 输 出 该 对 象 的 属性 和 对 应 的 值 ,实现 如 代码 清单 3 - 15 
所 示 。 

代码 清单 ”3 -15 


var people = new Object(); 

people. name = "XiaoMing"; 

people. age = 18; 

people. weight = 60; 

people. height = 170; 

for (var prop in people) { 
console.log(prop + " =" + people[ prop]); 

所 

// 输 出 结果 : 

//name = XiaoMing 

//age =18 

//weight =60 

//height =170 


例子 中 用 for -in 遍历 people 对 象 实例 ,对象 实 例 添 加 了 4 个 属性 。 在 遍历 中 用 局 部 
变量 prop 保存 对 象 的 属性 ,在 循环 体 中 输出 属性 名 字 , 用“ + "运算 符 连 接 对 象 属性 、 
“ =” 和 对 象 属性 的 值 ,可 以 看 到 输出 结果 。 

注意 例子 用 到 了 运算 符 [ ] 来 获取 对 象 属性 的 值 。 

可 以 看 到 定义 的 属性 先后 被 遍历 并 且 显 示 出 来 ,但 是 实际 上 属性 被 遍历 的 先后 顺序 
是 不 可 预测 的 ,可 能 会 因为 浏览 器 不 同 而 不 同 。 


3.7 break 和 continue 语句 


在 前 面 的 switch 语句 中 已 经 介绍 了 break , 它 的 作用 相当 于 跳出 switch 语句 ,继续 执 
了 本 


行 后 续 的 语句 。 实 际 上 除 此 以 外 ,break 还 能 够 用 于 循环 语句 中 ,另外 还 有 一 个 continue 
也 能 用 在 循环 语句 中 。 
当 在 循环 体 中 遇 到 break 语句 时 ,程序 会 立即 结束 “整个 "循环 , 即 跳出 循环 体 执行 后 
续 语 句 。 而 当 遇 到 continue 语句 时 ,程序 立即 结束 “当前 ”循环 , 即 不 执行 循环 体 中 剩 下 
的 语句 ,而 是 开始 下 一 个 循环 。 
下 面 来 看 看 它们 的 例子 ,首先 是 break 语句 ,实现 如 代码 清单 3 -16 所 示 。 
代码 清单 ”3 -16 


Var 
for(i =1ii<=10 i++){ 
aly 


break; 


console. log(i); 
} 
console.log("i = " +)); 
// 输 出 结果 : 
//1 
//2 
//3 
//4 
hs 


上 面 的 例子 中 ,利用 让 语句 进行 判断 , 当 i 为 5 的 时 候 ,就 执行 break 语句 ,结束 整个 
循环 。 可 以 看 到 输出 结果 ,5 以 前 都 是 顺利 执行 并 输出 i 的 数值 。 直 到 i 自 增 到 5 时 ,并 
没有 继续 执行 循环 ,而 是 跳出 了 循环 ,执行 后 续 的 语句 console. log("i =" +i)。 可 见 循 
环 结束 时 i 的 值 为 5。 可 见 遇 到 break 时 整个 循环 就 结束 了 ,下面 把 break 替换 成 continue 
语句 来 看 看 效果 ,实现 如 代码 清单 3 -17 所 示 。 


代码 清单 ”3 -17 
vari; 
tortils tl Tes 0 te) 
fi==5)1{ 
continue; 
} 


console. log(i); 


i 


5 
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console.log("i =" +)); 
// 输 出 结果 : 
/1 


当 i 为 5 的 时 候 ,就 执行 continue 语句 ,结束 当前 循环 。 因 此 输出 结果 中 并 没有 5 输 
出 ,而 后 是 正常 地 从 6 一 直 输 出 到 10, 并 且 最 后 i 的 值 为 11, 通过 这 两 个 例子 可 以 看 到 
break 和 continue 语句 的 差别 。 


3.8 小 结 


本 章 中 介绍 了 JavaScript 中 用 于 流程 控制 的 不 同 语句 。 其 中 用 于 选择 结构 语句 有 让 
语句 和 switch 语句 ,站 语句 还 可 以 紧 跟 else 语句 来 进行 分 支 。 以 下 是 它们 的 一 些 特点 : 

党 ”让 语句 只 执行 其 后 的 一 条 语句 ,所 以 需要 用 括号 把 多 条 执行 语句 包括 起 来 。 

党 站 语句 其 后 可 以 带 有 else 语句 ,指向 不 满足 条 件 时 的 执行 行为 。else 满足 就 近 
原则 ,意味 着 只 与 之 前 最 近 的 一 条 站 语句 匹配 。 

党 ”这 语 句 可 以 内 嵌 多 条 站 语句 ,形成 一 个 多 重 分 支 结 构 。 不 过 switch 语句 就 是 为 
了 多 重 分 支 结构 而 设 的 。 

学 switch 语句 的 每 条 case 子 语句 后 要 有 break 语句 ,否则 会 一 直 执行 下 去 。 如 果 
没有 适 配 的 case 语句 , 则 会 执行 default 语句 。 

另外 还 有 3 条 语句 用 于 循环 结构 ,分 别 是 while 语句 .do - while 语句 和 for 语句 ,以 下 
是 它们 的 一 些 特点 : 

党 while .do -while 和 for 语句 都 可 以 用 于 循环 ,其 中 while 和 for 语句 一 般 可 以 相 
互 替换 ,但 是 do - while 则 不 可 以 ,因为 do - while 语句 至 少 会 执行 一 次 循环 体 中 的 语句 。 

学 ”还 有 for-in 语 句 , 可 以 用 于 遍历 一 个 数组 中 的 所 有 元 素 或 对 象 中 的 所 有 属性 。 

学 ”循环 语句 中 使 用 break 语句 和 continue 语句 进行 流程 控制 。 其 中 break 语句 会 
退出 循环 语句 往 下 执行 ,continue 语句 则 用 于 结束 当前 循环 而 继续 下 一 次 的 循环 。 
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3.9 习题 


1. 以 下 哪个 判断 条 件 是 错误 的 ? 

A 5 

B. if( x&&y ) 

CGH( 3 = 

Dt( way 

2. 以 下 有 关 switch 语句 的 有 关 说 法 是 错误 的 ? 
A. case 子 语句 中 可 以 省 略 掉 break 语句 。 

B. default 子 语 句 不 可 以 省 略 。 

C.case 的 对 应 值 可 以 是 常量 和 变量 。 

D. switch 语句 可 以 用 让- else 语句 替换 。 

3. 语 名 “vari = 0; while(i<100) i+ +;” 中 ,循环 语句 运行 多 少 次 ? 


A.98 B.99 C.100 D. 101 

4. 语 名 "vari = 10; dol i+ +;| while(i<5); "中 ,循环 语句 将 运行 多 少 次 ? 
A.1 B.S C.10 D.0 

5. 语 句 “for( var i=0;i<5;i+ =2)" 中 ,循环 语句 结束 后 ,i 的 值 是 多 少 ? 

A.4 RS C:6 D:7 

6. 下 面 关于 break 和 continue 语句 的 说 法 中 ,错误 的 是 o 


A. 当 break 语句 作用 于 让 语句 时 ,表示 退出 让 语句 。 

B. 当 continue 语句 作用 于 循环 语句 时 ,表示 退出 当前 循环 ,进入 下 一 次 循环 中 。 
C. continue 不 能 作用 于 switch 语句 。 

D. break 语句 可 以 出 现在 switch 语句 的 default 子 语句 中 。 

7. 编写 程序 ,计算 1+3 +5 +… +99 的 结果 。 

8. 编写 程序 ,计算 9! 的 结果 , 即 9 x8 x7x…x3x2x1l。 


本 章 开 始 讲述 JavaScript 中 函数 及 其 使 用 方法 ,包括 一 个 函数 的 声明 定义 、 调 用 方 
式 , 以 及 函数 中 的 参数 声明 和 调用 返回 值 。JavaScript 中 的 函数 可 以 接收 任意 个 参数 , 提 
供 了 一 个 arguments 对 象 来 获取 多 个 参数 ,并 且 也 讲述 了 重 载 函 数 的 模拟 方法 和 递归 画 
数 的 一 些 概念 。 


4.1 什么 是 函数 


函数 可 以 说 是 一 系列 行为 的 集合 体 , 它 的 作用 就 是 把 固定 的 一 些 行为 放 到 一 个 模块 
中 ,可 以 在 任何 地 方 任何 时 候 调 用 。 通 常 来 说 把 一 些 重复 的 操作 放 在 一 个 函数 当中 , 那 
么 只 需 编写 一 次 代码 , 便 可 以 重复 利用 这 段 代 码 ,函数 可 以 放 在 程序 的 不 同 地方 。 定 义 
函数 的 好 处 在 于 降低 程序 复杂 度 , 把 一 项 复杂 的 操作 分 解 成 许多 小 操作 ,通过 调用 函数 
完成 ,使 代码 清晰 ,提高 可 读 性 。 

下 面 把 求 最 大 值 的 操作 放 在 一 个 函数 中 ,于 是 当 需 要 对 不 同 的 数值 进行 求 最 大 值 的 
行为 时 ,都 可 方便 调用 这 个 函数 ,降低 了 代码 元 余 度 ,实现 如 代码 清单 4 -1 所 示 。 

代码 清单 4-=-1 


function max(a, b, c) { 
var temp = a; 
if (temp < b) temp = b; 
if (temp < c) temp = ci; 
return temp ; 
上 
console. log( max(1, 2, 4)); //4 
console. log( max(5.2, 7.8, 4.1)); //7.8 


console.log(max('a，b'，'c) ); [VC 


例子 中 定义 了 一 个 函数 max ,函数 中 的 操作 是 设置 一 个 临时 变量 保存 其 中 一 个 值 ,并 
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与 其 他 两 个 值 比较 , 较 小 时 则 赋值 为 较 大 的 那个 值 ,从 而 通过 两 次 比较 后 即 可 确定 此 时 
变量 的 3 个 值 之 中 的 最 大 值 。 

把 上 述 的 一 系列 行为 都 放 在 了 函数 中 ,每 当 使 用 时 只 要 向 苑 数 传 入 3 个 值 , 即 可 以 
得 出 其 中 的 最 大 值 。 可 以 看 到 例子 中 的 代码 非常 清晰 ,配合 良好 的 命名 习惯 ,阅读 者 只 
要 看 到 函数 名 字 便 知道 此 处 的 操作 行为 。 

对 于 使 用 者 来 说 ,函数 有 两 种 类 型 : 

一 是 JavaScript 中 定义 好 的 函数 ,从 前 面 的 章节 中 可 以 看 到 有 哨 数 isFinite \isNaN 、 
parseInt 等 。 这 些 函数 不 需要 自己 去 定义 ,直接 调用 即 可 。 当 然 代码 清单 4 -1 中 求 最 大 
值 的 函数 max 也 已 经 有 JavaScript 定义 好 的 版 本 Math. max( ) 。 

二 是 开发 人 员 根 据 需要 ,自己 定义 的 函数 。 


4.2 ”函数 定义 


在 JavaScript 定义 一 个 函数 需要 用 到 关键 字 function ,并 且 在 其 后 跟 一 个 函数 名 和 一 
组 参数 列表 ,语法 如 下 。 

function funName( arg0, arg1, ......, argN) { 

statement 

} 

其 中 funName 代表 定义 的 这 个 函数 的 名 字 , 当 需要 调用 这 个 函数 的 时 候 ,就 是 利用 
这 个 名 字 来 指明 调用 的 是 这 个 函数 。 其 后 在 括号 ( ) 中 的 是 传 给 这 个 函数 的 参数 ,根据 传 
进来 的 参数 不 同 ,函数 得 出 的 结果 也 可 能 不 同 。 而 函数 体 statement 就 用 一 大 括号 括 起 
来 ,里 面 的 所 有 语句 都 属于 这 个 函数 。 

参数 列表 和 函数 体 都 不 是 必须 的 ,因此 可 以 这 样 定义 一 个 函数 

function sayHello() { } 

此 处 定义 了 一 个 名 为 sayHello 的 函数 ,并 且 参 数列 表 和 函数 体 都 是 空 的 。 当 调用 函 
数 时 ,什么 工作 也 不 做 ,这 样 定义 是 允许 的 。 一 般 这 样 做 的 目的 是 在 编程 当中 , 先 定义 一 
个 空 的 函数 ,以 后 有 扩充 工作 的 时 候 再 回来 修改 这 个 空 函 数 。 

更 一 般 的 情况 是 定义 一 个 带 参 数 的 函数 ,如 下 所 示 。 

function sayHello(name) { 

console. log(" 你 好 , 我 叫 ”+ name); 

} 

在 参数 列表 中 指定 了 一 个 参数 name, 通 常 把 在 定义 函数 时 指定 的 这 个 参数 称 为 形式 
参数 ,简称 形 参 。 形 参 主要 用 于 保存 传 进来 的 参数 的 值 ,并 在 函数 体内 使 用 。 因 此 即使 
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函数 体 一 样 ,函数 的 输出 结果 会 根据 传 进 不 同 的 参数 而 有 差异 。 
函数 定义 中 的 形 参 可 以 有 多 个 ,其 中 每 个 形 参 都 会 按照 传 进 参数 的 顺序 将 各 个 实 参 
保存 下 来 ,以 供 函 数 体 中 使 用 ,如 代码 清单 4 -1 中 的 max 函数 就 有 3 个 参数 。 
在 JavaScript 中 ,一 切 事物 都 是 对 象 ,函数 也 不 除外 ,因此 除了 上 面 这 种 定义 方法 ,还 
可 以 利用 定义 函数 对 象 的 方法 来 定义 一 个 函数 ,以 下 是 语法 
var funName = function (arg0, arg1, ......, argN) { 
statement 
} 
就 像 定义 一 个 变量 一 样 ,声明 一 个 变量 并 且 使 这 个 变量 指向 一 个 函数 对 象 ,因此 这 
个 变量 就 代表 了 这 个 函数 ,函数 的 调用 方法 一 致 。 
因此 可 以 利用 这 种 方法 定义 sayHello 函数 
var sayHello = function (name) { 
console. log(" 你 好 , 我 叫 ”+ name); 
} 
从 这 个 方法 可 以 看 出 JavaScript 中 一 切 都 是 对 象 的 说 法 ,况且 不 论 哪 一 种 定义 方法 ， 
函数 名 (保存 函数 对 象 引 用 的 变量 ) 都 可 以 作为 一 个 参数 值 再 次 传 进 到 另 一 个 函数 中 , 因 
此 在 JavaScript 中 会 衍生 出 多 种 非常 灵活 的 调用 行为 。 


4.3.1 形 参 和 实 参 


在 调用 函数 时 ,可 以 给 函数 传递 一 些 数据 , 称 这 些 数据 为 参数 。 参 数 分 为 两 种 ,分 别 
是 形式 参数 和 实际 参数 。 上 一 节 中 已 经 提 到 过 什么 叫 形式 参数 ;就 是 在 函数 定义 中 ,用 
来 保存 和 表示 传 进来 的 参数 的 变量 就 称 为 形式 参数 ;而 实际 参数 其 实 就 是 指 调用 函数 时 
实际 传 进 函 数 的 数据 ,这 些 就 称 为 实际 参数 。 下 面 来 举例 说 明 。 

定义 一 个 函数 

function sayHello(name) { 

console.log(" 你 好 ,我 叫 ”+ name); 

} 

上 面 这 个 函数 定义 中 ,用 name 来 保存 传 进来 的 参数 ,因此 把 name 称 作 形式 参数 。 

当 调 用 这 个 函数 时 
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var str = "XiaoMing"; 
sayHello( str) : 
声明 一 个 变量 str 并 赋值 为 " XiaoMing" ,并 且 作 为 参数 传 进 sayHello 函数 中 ,因此 此 
时 str 为 这 个 函数 的 实际 参数 。 
因此 可 以 说 形式 参数 保存 了 实际 参数 的 值 (或 引用 ) ,并 在 函数 体 中 使 用 。 


4.3.2 ” 形 参 和 实 参 数目 


现在 知道 了 函数 体 中 的 形 参 逐一 保存 实 参 的 值 ,并 且 在 函数 体 中 使 用 。 但 是 如 果 所 
设置 的 形 参 和 实际 传 进去 的 实 参数 目 不 一 致 ,会 导致 什么 的 结果 呢 ? 下 面 分 别 来 测试 
= 

1. 形 参 数 少 于 实 参 数 
形 参 数 少 于 实 参 数 , 实 现 如 代码 清单 4-2 所 示 。 

代码 清单 ”4 -2 


function test( arg0, arg1) { 
console. log( arg0); 
console. log( arg1); 

} 

test( 100, 200，300); 

// 输 出 结果 : 

//100 

//200 


对 于 形 参数 少 于 实 参数 的 情况 ,由 于 一 个 形 参 只 能 保存 一 个 传 进来 的 数据 ,因此 多 
余 的 实 参 将 没有 形 参 保存 ,因此 在 函数 体 中 无 法 由 形 参 取得 多 出 的 一 个 实 参数 据 。 在 这 
种 情况 下 ,在 一 些 智能 的 IDE 下 会 有 错误 提示 ,以 便 告诉 编程 人 员 形 参数 和 实 参 数 数目 
不 同 。 
2. 形 参数 多 于 实 参数 
形 参数 多 于 实 参数 ,实现 如 代码 清单 4 -3 所 示 。 
代码 清单 ”4 -3 


function test( arg0, arg1, arg2) { 
console. log( arg0); 
console. log( arg1); 
console. log( arg2); 


test( 100, 200); 
// 输 出 结果 : 
//100 

//200 
//undefined 


可 见 传 进去 的 实 参 少 于 形 参 时 ,那么 多 出 来 的 形 参 就 像 是 被 定义 却 没有 初始 化 的 变 
量 一 样 , 它 的 值 为 undefined。 如 果 在 函数 体 中 利用 这 个 undefined 值 的 形 参 进行 了 操作 ， 
那么 结果 是 未 知 的 ,有 可 能 得 到 错误 结果 ,有 可 能 程序 崩溃 。 而 且 在 这 种 情况 下 ,有 可 能 
IDE 不 会 有 错误 提示 ,所 以 在 调用 函数 时 要 明确 参数 个 数 是 否 正确 ,参数 是 否 可 以 忽略 等 
情况 。 

这 里 再 稍微 提 一 下 ,如果 希望 设计 一 个 参数 可 以 忽略 ,或 参数 有 默认 值 的 函数 ,可 以 
利用 学 到 过 的 逻辑 或 运算 符 (11) ,因为 逻辑 或 运算 符 还 可 以 返回 一 个 对 象 ,具体 的 规则 
可 以 翻 回 第 2 章 , 实 现 如 代码 清单 4-4 所 示 。 

代码 清单 ”4 -4 


function test( arg0, arg1) { 
arg0 = arg0 11 10; 
if (argl = = = undefined) arg1 = 20; 
console. log( arg0); 
console. log( arg1); 
} 
test(); // 输 出 结果 10 ”20 
test(0, 0); // 输 出 结果 10 0 


例子 中 的 函数 体 给 出 了 两 种 赋予 默认 值 的 方法 。 第 一 种 方式 是 利用 逻辑 或 运算 符 ， 
当 arg0 获取 到 一 个 数据 并 且 非 false 时 ,此 时 逻辑 或 即 返 回 第 一 个 操作 数 。 当 arg0 没有 
保存 值 时 为 undefined ,因此 逻辑 或 的 第 一 个 操作 数 转 化 为 布尔 值 时 为 false, 所 以 逻辑 或 
运算 符 输 出 第 二 个 对 象 ,而 这 时 只 要 把 默认 值 放 在 第 二 个 操作 数 的 位 置 , 即 可 起 到 赋予 
默认 值 的 作用 。 

第 二 种 方法 是 利用 让 语句 ,判定 形 参 是 否 等 于 undefined。 如 果 相 同 ,那么 说 明 argl 
没有 保存 到 参数 ,因此 赋予 一 个 默认 值 给 这 个 形 参 。 如 果 不 相 同 , 则 什么 都 不 做 ,因为 这 
时 候 argl 已 经 有 非 undefined 值 了 。 

当 直 接 调用 函数 test 而 什么 值 都 没有 传 进去 时 ,结果 都 取 用 了 默认 值 。 但 是 一 旦 把 
0 作为 参数 传 进去 的 时 候 , 似乎 问题 就 出 现 了 。 可 见 第 一 种 方式 下 参数 还 是 取 到 了 默认 
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值 ,但 是 希望 参数 是 0。 原 因 在 于 0 转换 为 布尔 值 false, 因 此 逻辑 或 继续 取 第 二 个 操作 
数 , 第 二 种 方式 就 没有 这 样 的 问题 。 因 此 这 里 面 给 了 提示 ,虽然 第 一 种 方式 实现 的 代码 
非常 短 , 但 是 遇 到 0 作 参 数 的 情况 就 运行 错误 。 第 二 种 方式 虽然 代码 较 长 ,但 是 适用 于 
任何 数据 类 型 (除了 实 参 是 undefined 的 情况 )。 使 用 哪 种 方式 由 具体 情况 决定 ,但 确定 
了 函数 的 参数 不 可 能 是 0 时 ,可 以 利用 第 一 种 方式 来 设置 默认 值 ,否则 需要 利用 第 二 种 
方式 。 


4.3.3 arguments 对 象 


上 面 提高 过 实 参数 多 于 形 参 数 时 ,没有 形 参 能 够 保存 多 出 来 的 实 参 数据 。 那 么 还 有 
没有 其 他 办 法 来 获取 到 这 个 传 进来 的 数值 呢 ? 有 的 , 那 就 是 利用 arguments 对 象 来 获取 
传递 进来 的 每 一 个 参数 。 

arguments 对 象 类 似 于 一 个 数组 , 它 的 每 一 个 元 素 保存 的 都 是 传递 进来 的 实 参数 据 ， 
可 以 使 用 方 括号 [ ] 运算 符 来 获取 它 的 元 素 。 并 且 可 以 利用 length 属性 来 确定 传 进来 的 
参数 个 数 。 因 为 数组 的 第 一 个 元 素 是 从 下 标 0 开始 的 ,所 以 想 要 获取 第 一 个 参数 时 ,可 
以 这 样 做 arguments[ 0]。 

下 面 利用 arguments 来 获取 代码 清单 4 -2 中 的 多 余 实 参 ,实现 如 代码 清单 4 -5 
所 示 。 

代码 清单 4 -5 


function test(arg0, arg1) { 
console. log( arguments[ 0] ); 
console. log( arguments[ 1] ); 
console. log( arguments[ 2] ); 
console. log( arguments. length) ; 

} 

test( 100, 200,300); 

// 输 出 结果 

//100 

//200 

//300 

//3 


现在 设置 的 形 参 ( arg0 ,argl ) 可 以 不 使 用 了 ,而 是 直接 通过 arguments 对 象 获 取 所 有 
的 参数 。 传 进去 3 个 数据 ,因此 arguments 对 象 的 属性 length 为 3。 
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利用 arguments 对 象 的 好 处 在 于 : 当 需 要 定义 一 个 函数 ,并 且 这 个 函数 不 管 传 进来 多 
少数 据 , 都 对 每 个 数据 做 同样 的 处 理 ,那么 此 时 arguments 显得 非常 方便 ,实现 如 代码 清 
单 4-6 所 示 。 


代码 清单 ”4 -6 


function test() { 
for (vari = 0; i < arguments. length; i+ +) { 


console. log( arguments[i] + 3); 


} 
test(1, 3, 5, 7, 9); // 输 出 结果 46 8 10 12 


代码 中 的 函数 作用 是 :对 所 有 传递 进来 的 数值 加 上 3 再 输出 ,这 个 函数 中 并 没有 限 
制 参数 的 个 数 ,内 部 是 利用 arguments 对 象 的 属性 length 来 作为 循环 的 次 数 ,对 每 个 参数 
加 3 后 再 输出 。 


4.3.4 ”模拟 函数 重 载 


对 于 某 些 编程 语言 (如 C+ + ) 有 函数 重 载 的 功能 。 什 么 是 函数 重 载 ? 就 是 可 以 定 
义 多 个 同名 函数 ,然后 根据 传递 进来 的 参数 类 型 或 者 参数 个 数 来 选 出 最 符合 的 那个 函数 
来 调用 。 但 是 在 JavaSeript 中 不 支持 函数 重 载 的 功能 ,因此 JavaScript 是 弱 类 型 ,在 定义 函 
数 时 无 须 指出 参数 的 类 型 ,因此 无 法 做 到 根据 参数 类 型 来 判断 符合 的 函数 。 

但 是 利用 JavaScript 中 的 arguments 对 象 , 可 以 做 到 模拟 函数 重 载 的 行为 。 做 法 就 是 
利用 站 语句 判定 传 进来 的 参数 个 数 ,以 此 作出 不 同 的 行为 。 下 面 给 出 一 个 例子 ,实现 如 
代码 清单 4 -7 所 示 。 

代码 清单 ”4-7 


function max() { 

var temp = arguments[0] ; 

for (vari = 1; i < arguments. length; i+ +) { 

if (temp < arguments[i]) temp = arguments[i] ; 

} 

return temp; 
} 
console. log( max(1, 3, 5)); //5 
console. log( max(1.1, 3.2, 5.2, 7.2, 9.3)); //9.3 
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console. log( max(" apple", "boy", "cat", "dog")); //dog 


上 面 的 代码 中 ,利用 了 arguments 对 象 改写 了 之 前 的 max 函数 ,现在 的 函数 不 在 仅仅 
局 限于 求 3 个 数 中 最 大 值 ,而 是 可 以 求 任意 数量 的 数据 中 的 最 大 值 。 
或 者 设计 如 下 一 个 函数 ,实现 如 代码 清单 4 -8 所 示 。 
代码 清单 ”4 -8 


function test() { 
if (arguments. length = = 2) { 
return arguments[0] * arguments[1]; 
} else if (arguments. length = = 3) { 


return arguments[0] + arguments[1] + arguments[2]; 


} 
} 
console. log( test(2, 5)); //10 
console. log( test(1, 2, 3)); //6 


函数 的 作用 是 检测 参数 个 数 ,如 果 只 有 2 个 参数 ,那么 返回 这 2 个 参数 的 积 ,如 果 有 
3 个 参数 ,那么 返回 这 3 个 参数 的 和 。 由 此 对 不 同 参数 个 数 而 产生 不 同行 为 。 
虽然 这 样 的 特性 算 不 上 完美 的 函数 重 载 ,但 是 也 有 非常 大 的 用 途 。 


4.4 函数 调用 返回 值 


在 上 面 的 例子 中 ,也 看 到 了 函数 可 以 返回 一 个 数值 ,利用 return 

return expression; 

如 果 返 回 的 是 一 条 表达 式 或 函数 ,那么 先 计 算出 这 条 表达 式 或 函数 的 数值 ,再 返 
如 果 一 个 函数 有 返回 值 ,那么 可 以 把 这 个 函数 作为 一 个 表达 式 并 赋值 给 一 个 变量 

var value = fun(); 

当然 也 可 以 什么 也 不 返回 ,自己 执行 return 即 可 。 

return; 

当 函 数 体 中 的 语句 执行 到 return 关键 字 时 ,返回 便 会 立即 结束 并 返回 一 个 值 。 如 果 
在 return 之 后 还 有 其 他 语句 ,那么 会 忽略 而 不 执行 ,实现 如 代码 清单 4-9 所 示 。 

代码 清单 4 -9 


回 


function test() { 


Py 


console.log("return 之 前 "); // 输 出 "return 之 前 " 
return; // 退 出 函数 
console. log( "return 之 后 "); // 没 有 起 作用 

} 

test( ); 


执行 上 述 例 子 以 后 ,你 会 发 现 只 有 return 之 前 的 语句 生效 ,而 之 后 的 语句 都 将 被 忽略 
掉 , 因 此 利用 return 可 以 在 某 些 特定 条 件 下 强行 退出 函数 ,以 防止 程序 崩溃 ,实现 如 代码 
清单 4 -10 所 示 。 


代码 清单 4-10 
function divide(a, b) { 
i (b=== 0) { 
console. log( "除数 不 能 为 01"); 
return; 
} 
console. log(a / b); 
} 
divide(10, 5); 2 
divide(4, 0); // 输 出 "不 能 除 以 0 的 数 " 


设计 一 个 除法 的 函数 ,因为 除法 不 能 除 以 一 个 为 0 的 数 (得 到 Infinity 的 值 ) ,因此 在 
函数 中 先 判 断 b 是 否 为 0。 如 果 为 0 则 输出 警告 消息 并 且 退 出 函数 , 借 此 能 够 防止 程序 
不 正确 运行 。 


4.5 ” 涪 归 函数 


一 个 函数 定义 的 函数 体 中 出 现 对 自身 直接 或 间接 的 调用 的 情形 ,这 样 的 函数 称 为 递 
归 函 数 。 为 什么 会 出 现 递归 调用 函数 的 方法 ? 是 因为 在 一 些 比较 复杂 的 数学 问题 当中 ， 
解决 上 层 问 题 需要 先 解决 处 于 下 层 的 问题 ,而 下 层 问 题 又 依赖 其 自身 的 下 层 问 题 。 如 果 
尝试 用 循环 等 其 他 方法 去 解决 ,那么 很 可 能 代码 非常 复杂 难以 理解 ,甚至 无 法 解决 这 样 
的 问题 ,于 是 便 诞 生出 递归 函数 的 解决 方法 ,比较 著名 的 递归 算法 是 Hanoi( 汉 诺 ) 塔 
问题 。 

下 面 再 举 一 个 数学 上 常见 的 递归 函数 的 使 用 ,这 个 便 是 递归 阶乘 函数 。 
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首先 来 简单 分 析 以 下 5 的 阶乘 51。 因 为 5! = 5 x41!, 而 4! = 4x31,31 =…… 当然 
这 道 问题 可 用 循环 解决 ,但 是 这 里 使 用 递归 函数 来 求解 ,实现 代码 如 代码 清单 4 -11 所 示 。 
代码 清单 4-11 


function factorial( num) { 
if (num <= 1){ 
return 1; 
} else{ 


return num * factorial(num — 1); 


} 
factorial( 5); //120 


其 实 只 要 列 出 递归 的 公式 , 即 可 写 出 上 述 的 递归 函数 ,公式 如 下 。 
ee | 1 (n=0,1) 
nx(n-1)! (nS 1) 

于 是 通过 站 语 名 判断 传 进来 的 参数 的 值 ,如 果 参 数 大 于 1 ,那么 递归 调用 自身 。 如 果 
参数 为 0 或 1, 那 么 直接 返回 1, 因此 递归 结束 。 

要 注意 的 地 方 是 :程序 中 不 应 该 出 现 无 休止 的 递归 调用 ,必须 设立 一 个 条 件 , 当 这 个 
条 件 成 立 的 时 候 开始 返回 结果 ,通常 这 个 条 件 就 是 最 下 层 问 题 的 解 。 否 则 就 像 无 限 循环 
一 样 ,只 能 使 用 任务 管理 器 终止 程序 了 。 


4.6 小 结 


本 章 主 要 讲述 了 JavaScript 中 函数 的 使 用 方法 。 其 中 函数 的 定义 方式 与 C 语言 的 定 
义 非常 相似 ,只 不 过 在 函数 定义 中 不 用 指定 参数 类 型 ,这 也 是 JavaScript 中 弱 类 型 的 
使 然 。 

函数 的 形式 参数 与 实际 传 进去 的 参数 数目 可 以 不 一 样 。 当 形 参 数目 多 于 实 参数 目 
时 ,前 几 个 形 参 分 别 对 应 着 传 进来 的 实 参 , 而 后 面 多 出 来 的 形 参 没有 定义 ,为 null 值 。 当 
参数 目 少 于 实 参数 目 时 ,多 出 来 的 实 参 不 能 用 形 参 来 获取 到 。 这 时 候 可 以 通过 函数 中 
的 arguments 对 象 获取 所 有 传 进来 的 实 参 。 

在 JavaScript 中 并 没有 如 C + + 中 的 重 载 函数 ,新 定义 的 一 个 同名 函数 会 覆盖 掉 之 前 
所 定义 的 函数 。 但 是 利用 arguments 对 象 中 的 属性 length ,通过 判断 传 进来 的 实 参 数目 进 
行 不 同 的 函数 行为 判定 ,从 而 模拟 了 重 载 函 数 。 
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4.7 习题 


1. Javascript 中 的 函数 定义 ,不 包含 以 下 哪个 部 分 ? 
A. 也 数 名 

B. 函数 体 

C. 参数 列表 

D. 函数 返回 类 型 

2. 以 下 函数 的 有 关 说 法 中 ,正确 的 是 

A. 定义 函数 需要 制定 返回 值 类 型 。 

B. 函数 的 参数 列表 不 能 为 空 。 

C. 函数 可 以 没有 返回 值 。 

D. Javascript 中 人 允许 函数 重 载 。 

3. 以 下 关于 函数 参数 的 有 关 说 法 中 ,错误 的 是 __。 

A. 传人 的 实 参数 目 可 以 多 于 形 参 数目 。 

B. 可 以 使 用 arguments 对 象 获取 传人 的 实 参 。 

C. 形 参数 目 不 能 多 于 实际 传人 的 实 参数 目 。 

D. 可 以 通过 arguments 对 象 知道 实际 传人 的 实 参数 目 。 

4. 一 下 关于 递归 函数 的 有 关 说 法 中 ,错误 的 是 o 

A. 递归 函数 是 指 一 个 函数 直接 或 间接 地 调用 自身 。 

B. 递归 函数 一 定 要 有 返回 值 。 

C. 递归 函数 需要 设置 一 个 条 件 来 退出 循环 调用 自身 。 

D. 递归 函数 能 够 解决 部 分 循环 语句 无 法 处 理 的 问题 。 

5. 编写 一 个 函数 fun(x,y,z) , 求 出 3 个 参数 中 的 最 大 值 和 最 小 值 并 输出 到 调试 台 。 
6. 编写 一 个 递归 函数 ,用 于 求 阶乘 的 值 ,并 利用 这 个 函数 求 出 91 的 结果 。 
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第 5 人 章 引用 类 型 


本 章 将 要 详细 讲述 引用 类 型 ,引用 类 型 是 一 种 特殊 的 数据 结构 。 它 封装 了 数据 与 方 
法 ,通过 一 个 new 运算 符 创 建 一 个 引用 类 型 的 实例 时 ,这 个 实例 便 拥 有 了 这 个 引用 类 型 
所 定义 的 属性 和 方法 ,通过 点 运算 符 便 可 访问 到 其 中 的 数据 。 引 用 类 型 是 JavaScript 的 
重要 组 成 部 分 ,也 是 构成 了 JavaScript 基于 对 象 编程 的 重要 基础 。 


5.1 基本 类 型 和 引用 类 型 


在 JavaScript 中 ,变量 可 能 取 两 种 不 同 数据 类 型 的 值 :基本 类 型 值 和 引用 类 型 值 。 基 
本 类 型 值 是 简单 的 数据 段 ,而 引用 类 型 值 是 指 那些 可 能 有 多 个 值 构成 的 对 象 。 在 访问 这 
两 种 类 型 值 时 产生 的 行为 会 有 差异 。 

在 第 2 章 中 介绍 了 5 种 基本 数据 类 型 :Undefined .Null .Boolean、Number 和 String。 这 
5 种 数据 类 型 的 值 都 属于 基本 类 型 ,因此 都 是 按 值 访问 的 , 即 对 一 个 保存 了 基本 类 型 值 的 
变量 操作 时 ,实际 上 是 直接 对 变量 的 内 存 进行 了 操作 。 

而 在 第 2 章 中 提 到 过 的 Object 类 型 就 是 一 种 引用 类 型 。 对 引用 类 型 的 一 切 操作 都 
是 按 引用 访问 的 , 即 通 过 一 个 对 象 的 引用 将 操作 反映 到 对 象 本 身 。 


5.1.1 内 存 保存 


对 于 基本 类 型 和 引用 类 型 的 值 的 保存 地 方 ,也 会 有 所 不 同 。 

党” 基 本 类 型 值 

存储 在 栈 (stack) 中 的 简单 数据 段 , 它 们 的 值 直接 存储 在 变量 访问 的 位 置 。 当 利用 

var 声明 两 个 变量 时 
var num = 6; 
var str = "XiaoMing"; 
产生 的 数据 将 存储 在 栈 (stack) ,各 自 保 存 自 己 的 值 ,共享 内 存 模 型 如 图 5 -1 所 示 。 
学 ”引用 类 型 值 
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栈 (stack ) 


str(“XiaoMing”) 
num(6) 


图 5 -1 基本 类 型 内 存 存储 


存储 在 堆 (heap ) 中 的 对 象 ,存储 变量 的 值 是 一 个 指针 ,指向 存储 对 象 的 内 存 处 。 
下 面 是 引用 类 型 的 内 存 模型 。 
当 定 义 一 个 对 象 的 时 候 ,对 象 实际 存储 在 堆 (heap ) 之 中 。 而 返回 给 变量 的 只 是 一 个 
引用 ,这 个 引用 指向 这 个 对 象 本 身 , 如 图 5 -2 所 示 。 
var people = new Object(); 
var car = New Object(); 
栈 (stack ) 堆 (heap ) 


Object 
Object 


图 5 -2 引用 类 型 内 存 存储 


正 因为 变量 中 存储 的 值 实际 上 只 是 对 象 的 引用 , 才 称 为 引用 类 型 。 在 后 面 会 发 现 ， 
一 旦 是 通过 new 关键 字 产生 的 类 型 ,全 都 是 引用 类 型 ,并 且 存 储 于 堆 (heap) 之 中 。 


5.1.2 复制 变量 值 


由 于 内 存 的 存储 方式 不 一 ,因此 导致 在 变量 的 复制 赋值 时 ,产生 的 行为 也 不 一 致 

党 ”基本 类 型 值 

如 果 从 一 个 变量 复制 基本 类 型 的 值 到 另 一 个 变量 时 ,将 会 产生 这 个 值 的 副本 ,然后 
复制 到 新 变量 的 内 存 所 在 位 置 ,实现 如 代码 清单 5 -1 所 示 。 


代码 清单 ”5 -1 
var num1 = 6; 
var num2 = numl; 
console. log( num1); //6 
console. log( num2); //6 
console. log(" 改 变 num2 的 值 "); /A" 改 变 num2 的 值 " 


num2 = 10; 
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console. log( num1); //6 
console. log( num2); //10 


把 变量 numl 复制 给 num2 时 ,num2 同样 获取 了 数值 6, 然 后 修改 变量 num2 的 值 为 
10 ,再 次 输出 时 ,可 以 看 到 变量 numl 的 值 没有 改变 ,而 只 有 变量 num2 的 值 变 为 10 ,其 复 
制 过 程 的 内 存 图 如 图 5 -3 所 示 。 


栈 (stack ) 栈 (stack ) 栈 (stack ) 
p> 
num2(6) num2(6) 
numl(6) numl(6) numl(O) 
复制 后 改变 值 


5 -3 ”基本 类 型 值 复制 过 程 


当 将 变量 numl 赋值 给 变量 num2 以 后 ,变量 num2 在 栈 中 新 建 一 内 存 用 以 保存 这 个 
值 ,改变 变量 num2 值 以 后 ,不 影响 原 变 量 numl 值 大 小 。 它 们 各 自 保 存 自己 的 值 , 互 不 
影响 。 

之 引用 类 型 值 

当 一 个 变量 复制 引用 类 型 的 值 到 另 一 个 变量 时 ,同样 也 是 创建 这 个 值 的 副本 , 放 到 
新 变量 的 内 存 所 在 位 置 。 但 是 有 一 点 不 同 的 是 ,这 时 候 变 量 的 值 并 不 是 对 象 本 身 ,而 是 
这 个 对 象 的 引用 (指针 )。 因 此 复制 结束 后 ,这 两 个 变量 所 指向 的 对 象 实际 上 是 同一 个 。 
通过 变量 改变 对 象 中 的 一 个 属性 ,那么 另 一 个 变量 访问 这 个 属性 时 也 改变 了 ,实现 如 代 
码 清单 5 -2 所 示 。 


代码 清单 ”5 -2 
var objt = new Object(); 
objl. name = "XiaoMing"; 
var obj2 = objf; 
console. log( obj1. name) ; //" XiaoMing" 
console. log( obj2. name) ; //" XiaoMing" 
obj2. name = "ZhangSan"; 
console. log( obj1. name) ; //"ZhangSan" 
console. log( obj2. name) ; //"ZhangSan" 


在 上 述 例子 中 ,只 改变 了 obj2 的 name 属性 的 值 ,但 是 objl 的 name 属性 的 值 也 改变 
了 ,原因 是 这 两 个 变量 实际 上 指向 同一 对 象 ,其 复制 过 程 的 内 存 图 如 图 5 -4 所 示 。 
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栈 (stack ) 堆 (heap) 
六 Object 
name( “XiaoMing” ) 
opjl 
栈 (stack ) 堆 (heap) 
| Object 
复制 后 | obj2 | name( “XiaoMing” ) 
objl 
栈 (stack ) 堆 (heap) 
| Object 
恋 | 
改变 值 obj2 name( “ZhangSan”) 
objl 


5 -4 引用 类 型 值 复 制 过 程 


5.2 引用 类 型 


引用 类 型 在 JavaScript 属于 一 种 数据 类 型 , 它 用 于 把 一 系列 的 属性 和 方法 放 在 一 起 ， 
统一 进行 管理 。 由 引用 类 型 定义 出 来 的 一 个 值 (对 象 ) 便 称 作 这 个 引用 类 型 的 实例 ,这 些 
对 象 都 包括 了 这 个 引用 类 型 中 所 包含 的 属性 和 方法 。 

例如 有 一 个 People 的 引用 类 型 ,这 个 类 型 中 包含 了 name 属性 和 age 属性 ,还 有 run 
的 方法 ,那么 当 用 new 关键 字 创建 这 个 类 型 的 实例 people 时 ,people 便 也 有 了 默认 的 
name 属性 \age 属性 和 run 的 方法 。 

以 上 的 叙述 都 是 JavaScript 基于 对 象 编程 的 基础 。 

JavaScript 中 提供 了 很 多 原生 的 引用 类 型 以 供 使 用 ,下 面 就 其 中 的 一 部 分 引用 类 型 进 
行 讲述 。 


5.2.1 Object 类 型 


Object 类 型 是 使 用 最 多 的 一 个 引用 类 型 ,而 在 JavaScript 中 的 引用 类 型 都 是 继承 于 
Object 类 型 的 。Object 类 型 包括 了 下 面 的 属性 和 方法 。 
党 ”constructor 属性 :保存 着 创建 此 对 象 的 函数 。 对 于 用 new Object( ) 创建 的 对 象 来 
说 ,constructor 属性 便 指向 Object。 
党 ”hasOwnProperty( property ) 函数 :用 于 检查 传 进去 的 参数 property 是 否 为 当前 对 
FO 
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象 的 属性 。 若 定义 了 一 个 people, 其 中 有 属性 name, 那么 people. hasOwnProperty 
(“name”) 返回 tue, 表 明 有 此 属性 。 
学 isPrototypeOf( object) 函数 :用 于 检查 传 进去 的 参数 object 是 否 为 当前 对 象 的 原 
型 ,原型 (prototype) 可 以 理解 成 是 一 个 对 象 创建 时 的 “模板 ”。 
党 ”propertyIsEnumerable( property ) 函数 :用 于 检查 传 进去 的 参数 property 能 使 用 
for - in 语句 遍历 。 例 如 constructor 就 是 不 能 被 遍历 的 。 
党 ”toString( ) 函数 :返回 对 象 的 字符 串 表 示 。 
党 valueOf( ) 函数 :返回 对 象 的 字符 串 ,数值 或 布尔 值 表示 。 
下 面 来 观察 一 下 以 上 各 属性 和 方法 的 输出 结果 ,实现 如 代码 清单 5 -3 所 示 。 


代码 清单 ”5-3 
var obj = new Object() ; 
obj. name = "XiaoMing"; 
console. log( obj. constructor) ; //function () { [native code] } 
console. log( obj. hasOwnProperty( "name'" ) ) ; //true 
console. log( obj. propertylsEnumerable( " constructor" ) ) ; //false 
console. log( obj. toString( ) ); //[ object Object] 
console. log( obj. valueOf( ) ); //Object {name : "XiaoMing"} 


以 上 结果 是 Google 浏览 器 的 输出 结果 ,对 于 不 同 的 浏览 器 输出 结果 也 会 有 所 不 同 。 
上 面 的 这 些 函 数 经 常用 于 在 调试 时 输出 对 象 来 检查 程序 的 运行 。 
1. 字面 量 定 义 
除了 之 前 提 到 过 用 new 关键 字 创 建 Object 对 象 ,这 里 再 介绍 男 一 种 定义 Object 对 象 
的 方式 ,就 是 利用 对 象 字面 量 表示 法 ,其 格式 为 用 大 括号 | | 把 一 个 或 多 个 属性 包括 起 来 ， 
以 此 简化 Object 的 定义 。 
varobj={ 
property1 : value, 
property2 : value, 
property3 : value, 


} 
当然 如 果 大 括号 中 不 设置 属性 ,那么 效果 就 相当 于 只 创建 一 个 Object 对 象 , 即 


var obj = {} 等 价 于 var obj = new Object(); 
利用 这 种 方法 可 以 快速 创建 带 有 多 种 属性 的 对 象 


var people = { 


name : "XiaoMing", 


age : 18, 
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weight : 60 

属性 名 和 属性 值 之 间 用 冒号 :" 隔 开 ,而 且 不 同属 性 间 要 用 逗号 ”," 隔 开 。 

2. 获取 属性 值 

获取 一 个 对 象 的 属性 值 ,一 般 都 是 使 用 点 表示 法 , 即 一 个 对 象 带 点 和 属性 名 来 获取 
相应 的 属性 值 

object. property 

还 可 以 用 方 括号 [ ] 来 获取 属性 值 ,这 种 获取 方法 类 似 于 数组 的 下 标 法 获取 元 素 。 但 
是 获取 属性 值 时 方 括号 [ ] 中 的 不 是 下 标 数 ,而 是 属性 名 

object[ property] 

这 里 需要 注意 的 是 :此 时 方 括号 中 的 属性 名 需要 以 字符 串 的 形式 表示 ,如 下 所 示 。 

people[ "name"] 等 价 于 people. name 


5.2.2 Array 类 型 


除了 Object 类 型 ,在 编程 中 经 常用 到 的 引用 类 型 就 是 Array 类 型 了 , 即 所 谓 的 数组 。 
JavaScript 中 的 数组 具有 很 大 的 灵活 性 ,因为 在 同一 个 数组 中 保存 的 元 素 可 以 是 任意 类 
型 ,也 就 是 说 ,数组 第 一 项 可 以 保存 一 个 数值 类 型 ,第 二 项 可 以 保存 字符 串 类 型 ,这 在 
JavaScript 中 是 允许 的 ,并 且 数 组 大 小 可 以 动态 调整 。 

1. 数组 定义 

对 于 创建 一 个 数组 ,同样 也 有 两 种 定义 的 方法 。 第 一 种 方法 就 是 利用 new 关键 字 创 
建 一 个 Array 类 型 

var ary = new Array(); 

此 时 这 个 数组 为 空 数 组 ,元素 长 度 为 0, 即 不 包含 任何 元 素 。 

如 果 想 要 创建 一 个 具有 给 定 长 度 的 一 个 数组 ,那么 可 以 在 创建 的 时 候 传递 一 个 数值 
进去 ,这 个 数值 就 代表 创建 数组 的 长 度 

var ary = new Array(5); 

此 时 所 创建 的 数组 长 度 为 5, 但 是 由 于 没有 赋值 ,因此 里 面 的 5 个 元 素 的 值 都 为 un- 
defined。 不 过 给 定 长 度 的 定义 意义 是 不 大 的 ,因为 数组 大 小 可 以 动态 调整 ,因此 不 必 担 
心 数组 容量 的 多 少 。 

当然 ,如 果 和 希望 在 创建 数组 的 同时 对 数组 进行 初始 化 ,那么 也 可 以 通过 传递 参数 来 
初始 化 数组 

var ary1 = new Array(1, 2, 3, 4, 5) ; 

var ary2 = new Array("apple", "boy", "cat" ) ; 
var ary3 = new Array("apple", 5, new Object( ) ) ; 
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把 数据 用 逗号 ,” 分 隔 传 到 构造 函数 中 ,每 个 数据 都 作为 元 素 用 来 初始 化 数组 。 上 
面 第 一 条 是 创建 一 个 带 有 5 个 数值 元 素 的 数组 ,第 二 条 创建 了 一 个 带 有 3 个 字符 串 元 素 
的 数组 ,而 第 三 条 就 创建 了 带 有 3 个 元 素 的 数组 ,里 面 的 元 素 分 别 有 字 符 串 、 数 值 和 
对 象 。 
这 里 要 注意 的 是 , 当 只 传递 一 个 字符 串 时 ,数组 被 创建 为 一 个 带 有 1 个 字符 串 元 素 
的 数组 ,但 是 如 果 只 传递 一 个 整数 数值 时 ,那么 创建 结果 就 是 指定 数组 的 长 度 ,而 不 是 初 


始 化 。 
var ary1 = new Array(5); // 数 组 长 度 为 5 
var ary2 = new Array("apple"); // 数 组 长 度 为 1, 这 个 元 素 即 为 "apple" 


第 二 种 创建 方法 是 利用 数组 字面 量 表示 法 , 即 用 方 括号 [ ] 把 所 有 元 素 包 括 起 来 ,每 
个 元 素 间 用 逗号 ”," 隔 开 。 

var ary = ["apple", "boy", "cat"]; 

var ary = [] 等 价 于 var ary = new Array(); 

如 果 括 号 中 不 包含 元 素 ,那么 等 价 于 创建 了 一 个 长 度 为 0 的 空 数组 。 

2. 元 素 获 取 与 修改 

获取 数组 元 素 的 方法 是 利用 方 括号 的 方法 ,其 中 方 括号 中 的 整数 值 是 获取 数组 元 素 
的 下 标 位 置 ,注意 下 标 位 置 从 0 开始 , 即 下 标 0 对 应 着 数组 的 第 一 个 元 素 。 修 改元 素 时 ， 
直接 通过 下 标 修改 即 可 ,如 下 所 示 。 


var ary = ["apple", "boy", "cat"]; 


console. log( ary[ 0] ); //"apple" 
ary[1] = "bed"; // 第 2 项 修改 为 "bed", 对 应 数组 下 标 为 1 
ary[2] = "car"; // 第 3 项 修改 为 "car", 对 应 数组 下 标 为 2 
数组 对 象 有 一 个 length 属性 ,这 个 属性 返回 的 是 数组 当前 的 长 度 , 利 用 这 个 属性 可 以 
查看 数组 中 有 多 少 个 元 素 。 
var ary1 = []; 
console.log(ary1.length) ; //0 


var ary2 = ["apple", "boy", "cat"]; 
console. log( ary2. length) ; //3 

还 记得 在 函数 内 部 可 以 调用 arguments 对 象 吗 ? arguments 也 有 一 个 length 属性 ,并 
且 同 样 是 以 数组 的 形式 保存 传递 进来 的 参数 值 ,但 是 要 注意 的 是 arguments 并 不 是 一 个 
数组 对 象 , 它 并 没有 数组 对 象 中 的 方法 ,只 能 保存 和 以 下 标 获取 修改 其 中 的 元 素 。 

在 JavaScript 中 要 获取 的 元 素 下 标 超出 数组 范围 时 ,程序 并 不 会 骨 溃 或 者 产生 不 可 
预料 的 结果 。 因 为 下 标 超出 了 数组 范围 ,所 以 元 素 值 是 未 定义 的 ,因此 返回 undefined 值 ， 
只 要 不 非法 操作 undefined 值 就 不 会 产生 错误 。 

数组 可 以 动态 调整 数组 大 小 , 当 试 图 通过 超出 范围 的 下 标 来 为 元 素 赋值 时 ,数组 就 
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会 重新 计算 其 数组 大 小 ,并 且 会 为 访问 的 下 标 值 位 置 插入 一 个 新 元 素 并 赋值 ,实现 如 代 
码 清单 5 -4 所 示 。 


var ary = ["apple", "boy", "cat"] 


console. log( ary. lengith) ; //3 
console. log( ary[ 26] ); //undefined 
ary[25] = "zero"; 

console. log( ary. length) ; //26 
console. log( ary[ 25] ); //"Zzero" 


从 上 述 例子 可 以 看 到 ,在 创建 时 初始 化 以 后 数组 长 度 为 3 ,访问 超过 数组 范围 的 元 素 
值 为 undefined。 并 且 对 超出 范围 的 元 素 赋 值 后 ,数组 长 度 改 变 为 26, 即 插入 元 素 作为 数 
组 的 最 后 一 项 ,而 从 下 标 3 到 下 标 24 间 的 元 素 都 是 未 定义 的 ,返回 undefined 值 。 

3. 数组 对 象 方法 

数组 对 象 除了 继承 了 Object 的 方法 以 外 ,还 有 自己 的 一 些 方法 , 下面 摘 取 部 分 常用 
的 进行 讲解 。 

学 push( ) 和 pop( ) 方 法 

push( ) 方 法 就 是 把 参数 中 的 值 按 顺 序 添 加 到 数组 最 后 一 项 当中 ,并 且 修改 数组 的 长 


度 。 而 pop 方法 就 相反 , 它 移 除数 组 最 后 一 项 ,并 且 将 数组 长 度 减 1 ,然后 返回 这 个 被 移 
除 的 值 ,实现 如 代码 清单 5 -5 所 示 。 
代码 清单 5 -5 


var ary = ["apple", "boy", "cat"]; 
ary. push(" dog"); 
console. log( ary); //"apple", "boy", "cat", "dog" 
console. log( ary. length) ; //4 

ary. push("egg", "fly"); 


console. log( ary); //"apple", "boy", "cat", "dog","egg", "fly" 


console. log( ary. length) ; //6 

console. log( ary. pop()); /fly” 

console. log( ary. pop() ); //"egg” 

console. log( ary); //"apple", "boy","cat","dog" 
console. log( ary. length) ; //4 


83. 
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党 shift( ) 和 unshift( ) 方 法 
shift( ) 方 法 是 移 除数 组 中 的 第 一 项 ,并 且 将 数组 长 度 减 1 ,然后 返回 这 个 被 移 除 的 


值 。unshift( ) 方 法 就 是 把 参数 中 的 值 添加 到 数组 前 端 ,并 且 修 改 数组 的 长 度 , 实 现 如 代码 
清单 5 -6 所 示 。 


代码 清单 ”5-6 
var ary = ["apple", "boy"]; 
ary. unshift( "cat" ) ; 
console. log( ary); //"cat", "apple", "boy" 
console. log( ary. length) ; //3 
ary. shift(" dog", "egg"); 
console. log( ary); //"dog","egg","cat","apple", "boy" 
console. log( ary. length) ; /6 
console. log( ary. shift( ) ) ; //"dog" 
console. log( ary. shift( ) ) ; //"egg" 
console. log( ary); //3 
console. log( ary. length) ; //"cat", "apple", "boy" 


学 reverse( ) 和 sort( ) 方 法 
reverse( ) 方 法 使 数组 元 素 顺序 头 尾 颠 倒 。sort( ) 方 法 使 数组 中 的 元 素 按 递增 顺序 进 


行 排序 ,但 是 要 注意 sort( ) 方 法 是 先 调 用 元 素 的 toString( ) 方 法 转化 为 字符 串 以 后 ,再 以 
字符 串 的 字符 编码 来 比较 排序 ,实现 如 代码 清单 5 -7 所 示 。 


代码 清单 ”5 -7 


var aryl = ["boy", "apple", "dog”", "cat", "egg"]; 

console. log( ary1. reverse() ) ; //"egg", "cat","dog","apple","boy" 
console. log( ary1. sort() ) ; //"apple", "boy", "cat", "dog", "egg" 
var ary2 = [3, 8, 10, 15, 30]; 

console. log( ary2. reverse() ) ; //30, 15, 10,8,3 

console. log( ary2. sort() ) ; //10, 15,3,30,8 


字符 串 的 排序 应 该 没有 问题 。 可 是 当 数 组 元 素 为 数值 时 ,sort( ) 方 法 在 排序 前 先 把 


数值 转 为 相应 的 字符 串 "3" ,"8" ,"10" ,"15" ,"30" ,从 而 先 比较 字符 串 第 一 位 的 字符 编 
码 值 , 可 知 "1" 最 小 ,因此 排序 结果 如 上 所 示 。 


那么 如 果 和 希望 排序 结果 是 以 数值 大 小 来 比较 ,更 进一步 地 说 ,如 果 数 组 元 素 为 对 象 ， 


要 求 排序 是 以 对 象 其 中 的 一 个 属性 来 排序 ,那么 应 该 怎么 做 呢 ? JavaSceript 允许 自 定 义 排 
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序 方法 ,sort( ) 方 法 接收 一 个 比较 函数 作为 参数 ,并 且 排 序 时 按照 这 个 函数 返回 的 值 来 
进行 。 
这 个 比较 参数 要 能 够 接收 两 个 参数 ,sort( ) 方 法 会 传 进 两 个 数组 元 素 作 为 参数 。 如 
果 第 一 个 参数 排 在 第 二 个 参数 前 ,那么 函数 应 该 返回 一 个 负数 ,相等 时 应 该 返回 0, 如 果 
第 一 个 参数 排 在 第 二 个 参数 之 后 ,那么 要 返回 正 数 ,这 个 比较 参数 的 实现 如 代码 清单 5 - 
8 所 示 。 
代码 清单 ”5 -8 


function compare( value1, value2) { 


if (value1 < value2) return —1; 


else if (value1 == value2) return 0; 
else return 1; 
} 
var ary = [10, 30, 3, 8, 15]; 
console. log( ary. sort( compare) ) ; //3,8, 10, 15,30 


5.2.3 ”Function 类 型 


在 JavaScript 中 一 切 都 是 对 象 ,当然 也 包括 函数 。 每 个 函数 都 是 Function 类 型 的 实 
例 , 在 定义 一 个 函数 的 时 候 ,实际 上 就 是 创建 了 一 个 函数 对 象 ,而 所 谓 的 函数 名 其 实 就 是 


一 个 指向 函数 对 象 的 变量 。 
既然 函数 是 一 个 引用 类 型 ,当然 也 可 以 使 用 new 产生 一 个 对 象 , 语 法 如 下 。 
var fun = new Function (arg0, arg1, ..., argN, statement); 


传人 构造 函数 的 参数 是 函数 的 形 参 名 和 函数 体 ,其 中 把 最 后 一 个 参数 当 作 是 函数 
体 , 即 以 下 两 种 定义 方式 是 一 致 的 。 

var add(num1，num2) { 

return num1 + num2; 

} 

等 价 于 

var add = new Function ("num1", "num2", "return num1 + Num2"); 

其 中 的 形 参 名 和 函数 体 都 要 用 字符 串 表示 ,虽然 这 种 形式 也 可 以 定义 函数 ,但 是 形 
式 比较 少见 ,不 适合 函数 体 较 长 的 函数 ,并 且 影 响 定义 的 执行 效率 ,建议 不 要 使 用 这 种 定 
义 方式 。 

1. 函数 是 对 象 

a 


ha 
人 于 ( ”HTML5 交 互动 画 开 发 实践 教程 ) 
要 明确 知道 函数 是 一 个 对 象 ,因此 对 于 了 苑 数 的 行为 就 容易 理解 了 。 首 先 也 数 名 只 是 
一 个 保存 函数 引用 的 变量 ,因此 一 个 函数 可 以 有 多 个 不 同 的 函数 名 ,只 要 这 些 变量 指向 
同一 个 函数 就 可 以 了 ,实现 如 代码 清单 5 -9 所 示 。 
代码 清单 ”5 -9 


var add = function (num1, num2) { 
return num1 + num2; 

}; 

var sum = add; 

console. log(add(1, 2)); //3 

console. log( sum(3, 4)); Pi 


定义 函数 add( ) 后 ,再 定义 一 个 变量 sum 指向 这 个 函数 ,并 且 把 sum 当 作 一 个 函数 
来 调用 ,可 以 见 到 运行 效果 一 样 ,都 是 简单 的 相 加 。 

如 果 用 同一 个 函数 名 先后 定义 两 个 不 相同 的 函数 ,那么 实际 后 来 定义 就 把 新 的 一 个 
函数 对 象 的 引用 赋值 给 了 这 个 变量 ,覆盖 了 之 前 的 引用 ,所 以 一 个 函数 名 只 能 对 应 一 个 
函数 ,实现 如 代码 清单 5 -10 所 示 。 


代码 清单 ”5 -10 

function add( num1, num2) { 

return num1 * num2; 
}; 
function add( num1) { 

return num1 + 50; 
}; 
console. log( add(3, 4)); //53 


如 果 有 函数 重 载 ,那么 输入 两 个 参数 时 理应 调用 第 一 个 函数 ,但 是 实际 输出 效果 是 
53 , 即 调 用 了 第 二 个 函数 ,说 明定 义 第 二 个 函数 时 把 第 一 个 函数 的 引用 覆盖 了 。 

进一步 ,可 以 把 函数 对 象 作为 一 个 参数 传 进 另 一 个 函数 中 ,这 在 Array 对 象 的 sort( ) 
方法 中 已 经 看 到 过 这 个 用 法 ,如 代码 清单 5 -6 所 示 。 

2. 函数 对 象 属性 和 方法 

函数 对 象 有 以 下 两 个 属性 

学 length 属性 :这 个 属性 表明 的 是 这 个 函数 希望 接收 的 参数 个 数 , 即 定义 时 所 给 出 
的 形 参 个 数 。 

党 ”prototype 属性 :prototype 属性 对 于 普通 的 函数 来 说 意义 不 大 , 它 的 作用 主要 体现 
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在 作为 构造 函数 时 。 有 关 构 造 函 数 和 prototype 属性 的 内 容 将 会 在 “面向 对 象 编程 "一 章 
中 详细 叙述 。 


5.3 基本 数据 类 型 的 方法 


为 了 便于 操作 基本 类 型 值 ,JavaScript 中 提供 了 3 个 特殊 的 基本 类 型 :Boolean .Num- 
ber 和 String 类 型 ,在 调用 一 个 基本 数据 类 型 的 方法 时 ,JavaScript 会 自动 地 在 基本 数据 和 
对 象 之 间 进 行 转换 。 从 而 能 够 像 操 作对 象 一 样 来 操作 基本 数据 类 型 。 

对 于 保存 有 基本 类 型 的 变量 ,可 以 直接 对 这 个 变量 调用 对 象 方法 ,实现 如 代码 清单 5 -11 
所 示 。 


代码 清单 ”5 -11 
var num = 1; 
var numToStr = num. toString(); 
console. log( typeof numToStr) ; //string 


尽管 num 变量 并 不 是 对 象 , 却 可 以 对 它 使 用 对 象 方法 toString( ) 将 其 转化 为 字符 串 。 
这 就 是 JavaSceript 把 基本 数据 转换 为 相应 的 字符 串 类 型 对 象 , 才 得 以 让 对 变量 进行 如 同 
对 象 般 的 操作 。 


5.3.1 Boolean 类 型 


Boolean 类 型 对 应 的 基本 类 型 是 布尔 值 ,Boolean 类 型 并 没有 提供 特有 的 一 些 方法 ,不 
过 继承 了 Object 类 型 的 方法 ,所 以 也 可 调用 toString( ) 方 法 和 valueof( ) 方 法 ,其 中 toString 
( ) 方 法 将 对 象 转化 为 对 应 的 字符 串 ,valueof( ) 方 法 将 对 象 转化 为 布尔 值 。 

不 过 要 和 弄 清 楚 的 是 ,此 时 定义 的 这 个 变量 不 再 是 基本 类 型 ,而 是 一 个 对 象 , 所 以 在 一 
些 行为 上 面 应 该 表现 出 对 象 的 性 质 ,实现 如 代码 清单 5 - 12 所 示 。 


代码 清单 ”5 -12 
var flag = false; 
console. log(flag && " Hello! "); //" Hello!" 
console. log( typeof flag. toString( ) ); // string 
console. log( typeof flag. valueof( ) ) ; // boolean 


ee 


过 
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这 里 面 要 注意 的 是 第 一 条 输出 表达 式 flag && " Hello!" ,输出 结果 是 字符 串 " Hel- 

lo!" 。 之 前 讨论 的 时 候 提 到 了 :运算 符 && 遇 到 第 一 个 操作 数 是 false 的 情况 ,马上 返回 

false 不 再 执行 。 但 是 在 这 里 的 flag 是 一 个 对 象 ,运算 符 && 遇 到 对 象 时 会 输出 第 二 个 操 
作 数 ,所 以 返回 的 结果 是 "Hellol" 。 


5.3.2 ”Number 类 型 


Number 类 型 对 应 的 基本 类 型 为 数值 类 型 。Number 类 型 也 继承 了 toString( ) 方 法 和 
valueof( ) 方 法 ,其 中 valueof( ) 方 法 将 对 象 转化 为 数值 类 型 ,toString( ) 方 法 将 对 象 转化 为 
对 应 的 字符 串 。 不 过 在 这 里 toString( ) 方法 可 以 接收 一 个 参数 ,这 个 参数 代表 要 返回 的 
字符 串 为 几 进 制 的 形式 。 例 如 ,一 个 十 进 制 数 3 , 当 传递 2 到 toString( ) 方 法 中 ,返回 的 字 
符 串 是 "11" ,实现 如 代码 清单 5 -13 所 示 。 


代码 清单 ”5 -13 
var num = 15; 
console. log( num. toString( ) ) ; er 
console. log( num. toString( 2) ); A/"1111" 
console. log( num. toString( 4) ) ; //"33" 
console. log( num. toString( 8) ) ; a 
console. log( num. toString( 16) ); 加 


不 输入 参数 时 ,toString( ) 方 法 默认 数值 十 进 制 形式 的 字符 串 表示 。 

除了 继承 的 方法 来 ,Number 类 型 还 提供 了 一 些 转换 为 字符 串 的 方法 ,包括 有 toFixed( )、 
toExponential( ) 和 toPrecision( ) 方 法 。 

学 toFixed( ) 方 法 :用 于 把 一 个 数值 转化 成 带 有 指定 小 数位 的 字符 串 表 示 ,转换 以 
四 舍 五 人 来 进行 。 这 个 方法 接收 一 个 参数 ,用 于 指定 带 有 的 小 数 个 数 , 默 认 情 况 是 0, 即 
不 保留 小 数 , 实 现 如 代码 清单 5 -14 所 示 。 


代码 清单 ”5 -14 
var num = 23.456; 
console.log(num.toFixed() ) ; Ha 
console. log( num. toFixed( 1) ); XA 23.5” 
console.log(num.toFixed(2) ) ; //"23.46" 
console. log( num. toFixed( 3) ) ; //"23.456" 
console. log( num. toFixed( 4) ); //"23.4560" 
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党 ”toExponential( ) 方 法 :用 于 把 一 个 数值 转化 成 科学 计数 法 的 字符 串 表 示 ,转换 以 
四 舍 五 人 来 进行 。 这 个 方法 接收 一 个 参数 ,用 于 指定 保留 的 小 数 个 数 ,默认 情况 是 保留 
所 有 小 数 , 实 现 如 代码 清单 5 -15 所 示 。 


代码 清单 ”5 -15 
var num = 23.456; 
console. log( num. toExponential( ) ) ; //"2.3456e +1" 
console. log( num. toExponential( 1) ) ; //"2.3e+1" 
console. log( num. toExponential( 2) ) ; //"2.35e +1" 
console. log( num. toExponential( 3) ) ; //"2.346e +1" 
console. log( num. toExponential( 4) ) ; //"2.3456e +1" 


console. log( num. toExponential( 5) ) ; 


//"2.34560e +1" 


党 ”toPrecision( ) 方 法 :用 于 把 一 个 数值 转化 成 指定 位 数 的 字符 串 表 示 , 转 换 以 四 舍 
五 人 来 进行 。 这 个 方法 接收 一 个 参数 ,用 于 指定 保留 的 位 数 ( 包 括 整 数 部 分 和 小 数 部 分 ， 
不 包括 指数 部 分 ) ,默认 情况 是 保留 所 有 数字 ,实现 如 代码 清单 5 - 16 所 示 。 

代码 清单 ”5 -16 


var num = 98.7654; 


console.log(num.toPrecision() ) ; 


//"98.7654" 


console. log( num. toPrecision( 1)); //"1le+2" 
console. log( num. toPrecision(2)); //"99" 
console. log( num. toPrecision( 3) ) ; //"98.8" 
console. log( num. toPrecision( 4) ); //"98.77" 
console. log( num. toPrecision( 5) ) ; //"98.765" 


5.3.3 String 类 型 


String 类 型 对 应 的 基本 类 型 为 字符 串 类 型 ,其 中 String 类 型 也 都 继承 了 toString( ) 方 
法 和 valueof( ) 方 法 ,不 过 这 两 个 方法 的 返回 值 都 对 应 字符 串 。 

下 面 来 介绍 一 下 String 类 型 的 属性 和 方法 。 

学 length 属性 :这 个 属性 返回 字符 串 的 字符 个 数 。 

学 ”获取 字符 方法 :一 共有 3 种 方法 获取 字符 串 中 对 应 位 置 的 字符 ,分 别 是 charAt( )、 


charCodeAt( ) 和 利用 下 标 获 取 。 


charAt( ) 方 法 接收 一 个 参数 ,为 要 获取 字符 的 下 标 位 置 ,位 置 从 0 开始 ,返回 对 应 的 
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字符 。charCodeAt( ) 同样 接收 下 标 位 置 为 参数 ,但 是 返回 值 是 字符 编码 。 另 外 的 可 以 用 
方 括号 [ ] 来 获取 对 应 下 标 位 置 的 字符 ,实现 如 代码 清单 5 -17 所 示 。 


代码 清单 ”5 -17 
var str = " Hello World! "; 
console. log( str. charAt(6) ) ; //"W" 
console. log( str. charCodeAt(6) ) ; //87 
console. log( str[ 6] ); MA W" 
var st2 = "Ww"; 
console. log( str2. charCodeAt( 0)); //119 


大 写字 母 "W" 对 应 的 字符 编码 是 87 ,会 发 现 小 写字 母 的 字符 编码 比 对 应 的 大 写 要 
大 ,因此 在 比较 字符 时 ,大 写字 母 要 小 于 小 写字 母 。 

学 ”获取 子 字符 串 :其 中 有 两 个 方法 substr( ) 和 substring( ) 获取 字符 串 中 的 子 字符 
串 ,这 两 个 函数 都 不 会 改变 原 字符 串 ,只 是 提取 其 中 的 字符 来 组 成 一 个 新 字符 串 并 返回 。 

substr( ) 接收 两 个 参数 ,第 一 个 参数 为 子 字符 串 的 起 始 位 置 ,第 二 个 参数 为 子 字符 串 
的 长 度 。 如 果 忽 略 第 二 个 参数 ,那么 默认 获取 到 字符 串 结束 ;如 果 忽 略 第 一 个 参数 ,那么 
获取 整个 字符 串 。 

substring( ) 同样 接收 两 个 参数 ,第 一 个 参数 为 子 字符 串 的 起 始 位 置 ,第 二 个 参数 为 子 
字符 串 的 终止 位 置 的 后 一 位 。 如 果 忽略 第 二 个 参数 ,那么 默认 获取 到 字符 串 结束 ; 如果 
忽略 第 一 个 参数 ,那么 获取 整个 字符 串 , 实现 如 代码 清单 5 -18 所 示 。 


代码 清单 ”5 -18 
var str = "Hello World! "; 
console. log( str. substr( ) ) ; //" Hello World!" 
console. log( str. substr( 1) ); //"ello World!" 
console. log( str. substr(2, 7)); //" lo Wor" 
console. log( str. substring( ) ) ; //" Hello World!" 
console. log( str. substring( 1) ); //"ello World!" 


console. log( str. substring(2, 7)); //"loWw" 


substr( ) 和 substring( ) 的 差别 主要 在 于 存在 第 二 个 参数 的 情况 ,上 述 substr(2, 7) 方 
法 从 第 3 个 字符 “1” 开 始 获取 ,长 度 为 7。 而 substring(2, 5) 方 法 从 第 3 个 字符 "1" 开始 获 
取 , 直 到 第 8 个 字符 (不 包括 第 8 个 字符 ) 。 
. 90 . 


5.4 Math 对 了 象 


JavaScript 中 提供 了 一 个 内 置 对 象 Math ,这 个 对 象 提供 了 数学 计算 中 常见 的 一 些 方 
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法 ,方便 编程 人 员 使 用 。 通 过 Math 对 象 即 可 调用 起 内 部 的 这 些 计 算 方 法 。 


1. Math 对 象 的 属性 


Math 对 象 中 的 属性 包括 了 数学 中 的 一 些 常量 , Math 中 属性 如 表 5 -1 所 示 。 


表 5 -1 Math 属性 
属 性 含义 
Math. E 自然 对 数 的 底数 
Math. LN10 10 的 自然 对 数 
Math. LN2 2 的 自然 对 数 
Math. LOG2E 以 2 为 底 e 的 对 数 
Math. LOGIOE 以 10 为 底 e 的 对 数 
Math. PI 圆周 率 六 
Math. SQRTI1_2 1/2 的 平方 根 
Math. SQRT2 2 的 平方 根 
2. Math 对 象 的 方法 
Math 对 象 中 包含 的 常用 数学 计算 方法 ,如 表 5 -2 所 示 。 
表 5 -2 Math 方 法 
属 性 含义 
Math. abs( x) 求 x 的 绝对 值 
Math. acos( x) 求 x 的 反 余弦 值 
Math. asin( x) 求 x 的 反正 弦 值 
Math. atan( x) 求 x 的 反正 切 值 
Math. atan2(y, 2) 求 y/x 的 反正 切 值 
Math. ceil( x) 对 x 进行 向 上 舍 人 
Math. cos( x) 求 x 的 余弦 值 (x 为 弧度 单位 ) 
Math. exp(x) 常量 e 的 x 次 宕 
Math. floor(x) 对 x 进行 向 下 舍 入 
Math. log( x) 求 x 的 自然 对 数 
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和 


续 表 
属 性 含义 
Math. max( arguments) 求 参 数 中 的 最 大 值 
Math. min( arguments) 求 参 数 中 的 最 小 值 
Math. pow( x, y) 求 x 的 y 次 宕 
Math. random( ) 返回 0~1 之 间 的 随机 数 ,不 包括 0 和 1 
Math. round( x) 对 x 进行 四 舍 五 入 
Math. sin( x) 求 x 正弦 值 (x 为 弧度 单位 ) 
Math. sqrt( x) 求 x 平 方 根 
Math. tan( x) 求 x 的 正切 值 (x 为 弧度 单位 ) 


其 中 max( ) 方 法 和 min 方法 ( ) 提供 寻找 最 大 值 和 最 小 值 的 用 途 。 它 们 可 以 接收 多 
个 参数 , 求 出 其 中 的 最 值 。 但 是 要 注意 的 是 传递 的 参数 只 能 是 数值 类 型 ,不 可 以 是 字符 
串 ,否则 出 现 错误 。 求 最 大 值 与 最 小 值 的 实现 如 代码 清单 5 - 19 所 示 。 


代码 清单 ”5-19 
console. log( Math. max(3, 30, 10, 15, 8)); //30 
console. log( Math. min(3, 30, 10, 15, 8)); //3 


//console. log( Math. max("apple"，"boy"，"cat") ) ; // 不 允许 


Math 对 象 中 有 3 个 方法 对 一 个 数值 进行 舍 入 ,只 保留 整数 部 分 ,分 别 是 ceil( ) floor( ) 和 
round( ) 方 法 。 它 们 的 区 别 在 于 对 小 数 的 舍 入 行为 不 同 。 

ceil( ) 方 法 将 小 数 进位 ,floor( ) 将 小 数 会 去 ,round( ) 遵循 四 舍 五 入 ,实现 如 代码 清单 
5 -20 所 示 。 


代码 清单 ”5 -20 
console. log( Math. ceil(23.01)); //24 
console. log( Math. floor(23. 01)); //23 
console. log( Math. round(23. 01)); //23 
console. log( Math. ceil(23. 99) ) ; //24 
console. log( Math. floor(23. 99) ); //23 
console. log( Math. round(23. 99) ); //24 


还 要 注意 的 是 在 Math 对 象 的 方法 中 ,sin( ) 方 法 和 cos( ) 方 法 参数 中 的 角度 都 是 弧 
度 制 的 角度 , 即 用 7 表示 180 度 。 因 此 计算 一 个 度数 制 的 角度 时 要 乘 上 Math. PI 常量 
转换 为 弧度 制 ,实现 如 代码 清单 5 -21 所 示 。 
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代码 清单 ”5 -21 
console. log( Math. sin(0)); //0 
console. log( Math. cos(0) ) ; AM/ 
console. log( Math. sin( Math. Pl) ) ; //1.2246063538223773e -16 
console. log( Math. cos( Math. Pl) ) ; //-1 


var degToRad = Math. Pl / 180; 
console. log( Math. sin(30 * degToRad)); //0.49999999999999994 
console. log( Math. cos(60 * degToRad)); //0.5000000000000001 


可 以 看 到 用 上 述 方法 计算 得 到 的 值 并 非 完 全 正确 ,而 是 有 一 小 点 误差 ,在 精度 要 求 
不 高 的 情况 下 完全 可 以 忽略 。 


5.5 小 结 


对 象 封装 了 数据 结构 和 方法 ,在 JavaScript 中 被 称 为 是 引用 类 型 的 一 个 实例 ,引用 类 
型 的 主要 特点 在 于 : 

党 ”引用 类 型 的 实例 保存 在 一 个 堆 之 中 ,一 个 变量 所 获取 到 的 只 是 指向 这 个 实例 的 
一 个 引用 。 而 基本 数据 类 型 则 保存 在 栈 之 中 ,每 个 变量 保存 有 不 同 的 实体 。 

党 “引用 类 型 封装 了 属性 和 方法 ,可 以 通过 点 运算 符 取 用 一 个 对 象 中 的 属性 值 和 


党 ”所 有 的 引用 类 型 都 是 继承 于 Object 类 型 ,因此 都 继承 下 Object 类 型 中 的 属性 和 
方法 。 

党 ”函数 实际 上 是 一 个 对 象 , 它 是 引用 类 型 Function 的 一 个 实例 。 

党 ”在 调用 基本 数据 类 型 上 的 方法 时 ,JavaSeript 会 自动 在 基本 数据 类 型 和 引用 类 型 
间 转 化 。 

JavaScript 中 还 内 置 有 一 个 对 象 Math ,这 个 对 象 中 包括 了 数学 上 的 基本 数值 和 数学 
运算 函数 ,方便 开发 人 员 调 用 其 中 的 方法 进行 数学 计算 。 


5.6 习题 


1. 基本 类 型 存储 在 之 中 ,引用 类 型 存在 在 a 
2. 以 下 数据 类 型 的 有 关 说 法 中 ,错误 的 是 6 
03s 
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A. 引 用 类 型 存储 在 堆 中 ,我 们 通过 指针 获取 该 类 类 型 的 引用 。 
B. 基本 数据 类 型 赋值 时 ,会 产生 原 变量 值 的 一 个 副本 并 赋 给 新 的 变量 。 
C. 可 以 通过 运算 符 (. ) 引 用 一 个 对 象 的 属性 或 方法 。 
. 基本 数据 类 型 和 引用 类 型 在 内 存 中 的 存储 位 置 一 样 。 
. 以 下 哪个 语句 不 是 定义 了 一 个 Object 对 象 ? 


D 

:) 

A.var obj = |}; 

B.varobj = []; 

C.var obj = new Object( ); 

D. var obj = jage:18| 

4. 以 下 哪 条 语句 不 是 定义 一 个 函数 对 象 ? 
A. function fun( ) 1} ; 

B.var fun = function( )||; 
C.fun() {1}; 

D.var fun = Function("| |"); 
5. 语句 “typeof null" 的 结果 是 以 下 哪 一 个 ? 
A. null 
B. undefined 
C. object 
D. number 
6 
A 
B 
C 
D 


.语句 “var num = 18 ;console. log( num. toString(8) ) ;” 的 输出 结果 是 a 
"22 
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7. 语 名 “var num = 12. 345 ; consoloe. log ( num. toFixed (2 ) );” 的 输出 结果 
是 。 

23 

B. 12.34 

12.33 

D. 12.345 

8. 以 下 哪 条 语句 产生 一 个 2 ~8 的 随机 数 ? 

A. Math. random() * 8 

B. Math. random() * 8 + 2 

C. Math. random() * 6 + 2 


三 “ 
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D. Math. random( ) * 6 


9. 语句 “var str ="123456" ;str. substring(2,5);” 输 出 的 结果 是 o 
A.2345 

B.345 

C.3456 

D. 23456 


“095. 
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第 6 草 面向 对 象 编程 


本 章 开 始 讲述 一 个 重要 概念 , 即 面向 对 象 编 程 。 严 格 来 说 ,JavaSeript 是 一 种 基于 对 
象 的 语言 ,但 是 它 可 以 利用 自身 的 灵活 性 实现 面向 对 象 的 功能 ,包括 对 象 的 封装 .继承 和 
多 态 性 。 本 章 将 讲述 在 JavaScript 中 如 何 创建 对 象 继承 对 象 ,以 及 实现 多 态 性 。 


6.1 概述 


对 象 包含 了 自己 的 属性 和 一 套 方法 ,程序 可 以 去 访问 对 象 的 属性 或 者 调用 方法 来 做 
下 面 来 看 一 个 例子 。 
假设 有 一 个 人 ,他 有 名 字 和 年 龄 ,因此 定义 两 个 变量 来 保存 这 些 信息 : 
var peopleName = "XiaoMing"; 
var peopleAge = 18; 
这 个 人 还 会 跑 , 因 此 定义 一 个 “ 跑 " 的 方法 : 
var run = function (name) { 
console. log( "我 是 ”+ name +“", 我 可 以 跑 "); 


那么 当 对 这 个 人 调用 跑 的 方法 时 ,把 这 个 人 的 名 字 传 给 这 个 方法 。 
run( peopleName) ; //" 我 是 XiaoMing, 我 可 以 跑 " 


很 好 ,现在 这 个 程序 运行 正常 。 
但 是 如 果 有 一 天 ,需要 定义 一 只 鸟 ,这 只 鸟 可 以 飞 。 
var fly = function (name) { 
console. log( "我 是 ”+ name +“", 我 可 以 飞 "); 
} 
然后 一 不 小 心 把 人 的 名 字 传 递 给 这 个 “ 飞 ” 的 方法 。 
fly( peopleName); //" 我 是 XiaoMing, 我 可 以 飞 " 
现在 可 是 变 得 不 得 了 ,人 竞 然 可 以 飞 ! 此 处 就 是 预兆 着 程序 ,出 现 不 正常 行为 ,或 者 
导致 程序 出 现 错误 。 如 果 代 码 量 大 ,那么 维护 代码 就 变 得 不 容易 。 
a 6 
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下 面 利 用 面向 对 象 的 编程 方法 实现 。 
var people = { 
name : "XiaoMing", 
age : 18, 
run : function () { 
console. log( "我 是 ”+ this. name +", 我 可 以 跑 "); 


} 

那么 需要 这 个 人 跑 的 时 候 , 只 需要 调用 对 象 方法 。 

people. run(); 

不 过 你 也 可 能 会 错误 调用 成 

people. fly() 

但 是 在 这 个 时 候 ,发 现 错误 就 会 变 得 相对 容易 ,因为 一 个 people 对 象 中 不 存在 fly( ) 


的 方法 ,甚至 一 些 智能 的 IDE 会 有 错误 提示 。 


利用 面向 对 象 的 编程 思维 ,1) 可 以 更 方便 地 管理 数据 和 函数 间 的 关系 ;2 ) 维 护 和 阅 


读 代 码 也 会 变 得 相对 简单 ;3 ) 可 以 编写 复杂 程序 。 


以 上 在 对 象 的 方法 定义 中 ,出 现 了 ”this" 关 键 字 ,下 面 开 始 讲述 JavaScript 中 有 关 面 


向 对 象 编程 的 知识 。 


6.2 this 对象 


在 上 述 例子 中 看 到 ,在 run( ) 方 法 中 出 现 了 一 个 this 的 关键 字 , 并 且 可 以 看 到 它 通过 


点 运算 符 取得 name 属性 ,那么 实际 上 this 是 代表 什么 呢 ? 不 妨 测试 一 下 ,实现 如 代码 清 
单 6-1 所 示 。 


代码 清单 ”6 -1 


var people = { 
name : "XiaoMing", 
age : 18, 
show : function () { 
console. log( this. name) ; 
console. log( this. age); 
console. log( this) ; 


console. log(this = = people); 
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}; 

people. show() ; 

// 输出 结果 

//"XiaoMing" 

//18 

//Object {name: "XiaoMing", age: 18, show: function} 

//true 


定义 一 个 名 叫 people 的 对 象 ,其 中 有 属性 name 和 属性 age ,并 且 已 经 初始 化 属性 值 。 
还 定义 了 一 个 对 象 方法 show( ) , 它 的 作用 就 是 利用 this 访问 属性 name 和 age, 并 且 输 出 
this 来 查看 结果 。 

可 以 看 到 ,通过 this 访问 到 的 属性 值 就 是 对 象 people 的 属性 值 。 第 3 行 输出 结果 表 
示 this 是 一 个 对 象 ,其 中 包含 它 的 属性 和 对 应 的 属性 值 。 最 后 利用 相等 运算 符 来 测试 
this 和 people 的 关系 ,返回 结果 是 true。 

通过 这 个 测试 例子 可 以 发 现 

学 this 是 一 个 对 象 。 

党 ”并且 this 就 是 指向 着 对 象 本 身 。 

当 通 过 一 个 对 象 调用 其 对 象 方法 时 ,JavaScript 就 把 这 个 对 象 传 给 了 方法 内 部 的 this 
对 象 中 ,因此 在 方法 调用 时 ,this 就 指向 了 这 个 对 象 本 身 ,可 以 通过 this 来 获取 或 操作 对 
象 的 属性 。 

this 对 象 的 目的 在 于 :同一 个 引用 类 型 可 以 产生 出 多 个 实例 ,每 个 实例 都 有 着 自己 的 
属性 值 。 为 了 分 清楚 方法 调用 时 操作 的 属性 是 属于 哪个 实例 的 ,就 必须 把 这 个 实例 传 给 
this, 由 this 来 处 理 对 象 实例 的 属性 。 

this 对 象 并 不 是 对 象 方法 特有 的 , 它 是 所 有 函数 内 部 都 有 的 一 个 对 象 ,就 像 arguments 
对 象 一 样 。 平 常 的 函数 调用 时 会 把 window 对 象 传 给 this ,而 window 对 象 是 指 浏览 器 本 
身 , 也 相当 于 程序 本 身 , 定 义 的 所 有 变量 和 函数 都 可 以 看 作 是 window 对 象 的 属性 。 而 对 
象 调用 方法 时 , 传 给 this 的 就 是 对 象 本 身 。 


6.3 封装 


除了 利用 Object 对 象 添加 属性 和 方法 外 ,还 有 其 他 创建 对 象 的 方法 , 下 面 来 介绍 两 
种 创建 对 象 的 方法 。 
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6.3.1 构造 函数 


前 面 已 经 介绍 了 怎么 样 创建 一 个 对 象 , 利 用 对 象 的 字面 量 定义 ,在 大 括号 中 可 以 定 
义 出 对 象 的 属性 和 相应 的 属性 值 。 但 是 当 要 创建 多 个 对 象 的 时 候 , 重 复 代 码 就 显得 太 多 
了 。 既 然 每 个 对 象 都 有 相同 的 方法 ,而 只 有 属性 值 不 同 ,那么 能 不 能 够 通过 传递 属性 值 
来 创建 不 同 对 象 呢 ? 

答案 是 能 够 的 ,这 时 候 就 要 利用 构造 函数 的 形式 来 创建 对 象 。 

在 上 一 章 “ 引 用 类 型 "中 介绍 了 JavaScript 中 原生 的 一 些 构造 哨 数 ,其 实 就 是 跟 在 new 
后 面 的 引用 类 型 名 (如 Object 等 ) 。 在 JavaSeript 中 ,引用 类 型 就 是 一 个 构造 函数 , 它 指定 
了 由 此 产生 的 实例 中 内 含 的 属性 和 方法 ,也 即 指定 了 一 类 对 象 属于 这 个 类 型 。 

下 面 来 看 看 怎么 自 定义 一 个 构造 函数 来 创建 对 象 ,实现 如 代码 清单 6 -2 所 示 。 

代码 清单 ”6 -2 


var People = function (name, age) { 
this. name = name; 
this. age = age; 
this. show = function () { 
console. log( this. name); 


console. log( this. age) ; 


}; 

var peoplel = new People("XiaoMing", 18); 
console. log( people1. name) ; //"XiaoMing" 
console. log( people1. age); //18 


var people2 = new People("ZhangSan", 20); 
people2. show!( ); //"ZhangSan" 20 


可 以 看 到 此 时 this 对 象 又 出 现 了 ,在 构造 函数 中 的 this 对 象 同样 是 指向 了 实例 ,不 过 
这 个 时 候 的 this 对 象 指 向 的 是 新 创建 的 对 象 , 对 象 的 构造 过 程 如 下 。 
党 ”利用 new 操作 符 创 建 一 个 新 对 象 。 
学 ”把 新 对 象 的 引用 传 给 构造 函数 中 的 this 对 象 , 此 时 this 指向 了 这 个 新 创建 的 
对 象 。 
党 ”执行 构造 函数 内 部 的 代码 。 可 以 看 到 此 例 中 在 构造 函数 内 部 ,先后 为 this( 即 新 
.99 . 
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对 象 ) 添加 了 name 属性 和 age 属性 ,并且 添加 了 一 个 show( ) 的 方法 。 

学 ”返回 这 个 新 对 象 的 引用 ,把 这 个 引用 赋值 给 变量 名 , 即 对 象 名 。 此 例 中 是 peo- 
plel 和 people2. 

因此 新 创建 的 对 象 便 有 了 name 属性 ,age 属性 和 show( ) 方 法 。 

这 个 构造 函数 能 够 接收 两 个 参数 ,并 把 这 两 个 参数 的 值 赋值 给 新 对 象 的 相应 属性 ， 
因此 利用 这 一 点 ,只 需 把 对 象 的 不 同属 性 值 传 递 给 构造 函数 , 便 能 够 创建 具有 相同 方法 ， 
不 同属 性 值 的 对 象 了 。 

在 例子 中 ,分 别 创建 了 两 个 对 象 peoplel 和 people2 ,并 传递 不 同 的 属性 值 。 之 后 输出 
它们 的 属性 值 。 可 以 看 到 这 两 个 对 象 分 别 保存 这 不 同 的 属性 值 ,而 且 people2 对 象 调用 
方法 show( ) 输 出 自身 的 属性 值 。 这 样 就 可 以 看 清楚 , 当 方法 内 部 有 了 this 对 象 ,就 可 以 
确定 要 访问 的 属性 来 源 于 哪个 对 象 ,而 不 会 访问 到 其 他 的 对 象 中 去 了 。 

1. new 操作 符 

在 创建 对 象 的 时 候 千 万 不 能 省 略 掉 new 操作 符 , 如 下 例子 。 

var people = People("XiaoMing" ，18 ) ; 

上 述 的 语句 是 错误 的 。 当 不 使 用 new 操作 符 来 调用 People( ) 时 ,People( ) 就 变 作 了 
一 般 的 函数 ,于 是 普通 函数 把 return 语句 后 的 数据 返回 给 变量 。 但 是 People( ) 中 没有 re- 
tur 语句 ,因此 返回 值 是 undefined ,所 以 变量 people 的 值 只 是 undefined 值 而 不 是 对 象 。 

要 记 住 , 创 建 任何 对 象 的 时 候 都 要 使 用 new 操作 符 。 

2. constructor 属性 

在 “引用 类 型 "一 章 中 提 到 过 ,JavaSeript 所 有 的 引用 类 型 都 继承 于 Object 类 型 , 自 定 
义 的 类 型 也 不 例外 。 因 此 所 产生 的 对 象 中 ,除了 自 定 义 的 属性 和 方法 外 ,都 继承 Object 
类 型 中 带 有 的 属性 和 方法 。 

回 到 “引用 类 型 "的 Object 类 型 , 提 到 过 constructor 属性 , 它 的 作用 是 保存 着 创建 此 
对 象 的 函数 。 这 里 的 函数 其 实 就 是 指 相应 构造 函数 ,因此 对 于 任何 对 象 ,只 要 访问 它 的 
constructor 属性 ,就 可 以 知道 它 的 构造 孔 数 是 什么 ,实现 如 代码 清单 6 -3 所 示 。 

代码 清单 ”6 -3 


var People = function (name) { 
this. name = name; 
}; 
var obj = {}; 
var people = new People("XiaoMing"); 
var num = 1; 
var str = "Hello"; 


console. log( obj. constructor) ; //function Object() { [native code] } 
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console. log( people. constructor) ; //function (name) { this. name = name; } 
console. log( num. constructor) ; //function Number() { [native code] } 
console. log( str. constructor) ; //function String() { [native code] } 


利用 console. log 输出 结果 的 时 候 , 郴 数 会 利用 toString( ) 方 法 将 数据 转化 为 字符 串 
形式 以 后 再 输出 。 如 果 输 出 的 是 一 个 函数 ,那么 将 以 字符 串 形 式 输出 这 个 函数 的 定义 。 
可 以 看 到 以 上 对 象 的 constructor 属性 都 指向 它们 的 构造 函数 。 


6.3.2 原型 方法 


每 个 函数 也 是 一 个 对 象 ,对 象 都 有 属性 和 方法 。Function 类 型 的 实例 都 有 prototype 
(原型 ) 属 性 , 它 指向 的 是 一 个 对 象 。 而 prototype 属性 的 作用 在 于 为 构造 函数 (引用 类 
型 ) 的 实例 提供 共享 的 属性 和 方法 , 即 prototype 属性 所 指 对 象 中 的 所 有 属性 和 方法 ,都 能 
够 被 实例 访问 到 。 

因此 把 属性 和 方法 定义 在 prototype 属性 所 指 的 对 象 中 ,那么 所 创建 出 来 的 对 象 也 有 
了 同样 的 属性 和 方法 ,实现 如 代码 清单 6 -4 所 示 。 

代码 清单 ”6 -4 


var People = function () {}; 

People. prototype. name = "XiaoMing"; 

People. prototype. age = 18; 

People. prototype. show = function () { 
console. log( this. name); 


console. log( this. age) ; 


}; 

var people = new People(); 

console. log( people. name) ; //" XiaoMing" 
console. log( people. age) ; //18 

people. show( ); //" XiaoMing", 18 


上 面 的 例子 中 ,构造 函数 的 内 部 什么 也 不 做 ,只 是 定义 一 个 空 的 构造 函数 。 接 下 来 
对 这 个 构造 函数 的 prototype 属性 添加 属性 和 方法 。 因 此 在 创建 新 对 象 以 后 ,所 有 的 对 象 
都 能 够 共享 到 原型 中 的 属性 和 方法 ,自然 不 同 对 象 的 属性 值 也 一 样 。 

实例 与 prototype 对 象 间 的 关系 如 图 6 -1 所 示 。 
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图 6 -1 实例 与 prototype 关系 


prototype( 原型 ) 为 实例 提供 了 一 个 渠道 去 访问 它 其 中 的 属性 和 方法 , 即 所 有 实例 共 
享 了 自己 的 属性 和 方法 。 一 方面 ,所 有 实例 都 有 共同 的 属性 和 方法 ; 另 一 方面 ,属性 值 和 
函数 对 象 都 指向 同一 个 对 象 。 

如 果 改 变 新 创建 的 对 象 之 中 的 name 属性 ,在 上 述 例子 中 的 prototype 对 象 的 name 属 
性 并 不 会 改变 ,因为 此 时 这 实例 会 创建 一 个 同名 的 属性 name ,并且 覆盖 原来 的 访问 渠道 ， 
实现 如 代码 清单 6 -5 所 示 。 

代码 清单 ”6-5 


var People = function () {}; 
People. prototype. name = "XiaoMing"; 
People. prototype. age = 18; 
People. prototype. show = function () { 
console. log( this. name) ; 
console. log( this. age) ; 
欢 
var people1 = new People(); 
var people2 = new People(); 
people2. name = "ZhangSan"; 
people2. age = 20; 
people1. show( ) //"XiaoMing", 18 
people2. show!( ); //"ZhangSan",20 


上 述 例子 中 ,对 people2 的 name 和 age 属性 重新 赋值 ,然后 依次 输出 peoplel 和 peo- 
ple2 的 属性 值 。 输 出 结果 显示 它们 的 属性 值 各 不 相同 ,说 明 people2 的 属性 修改 没有 影 
响 到 原来 的 prototype 对 象 中 的 属性 值 ,而 只 是 覆盖 了 访问 渠道 。 现 在 它们 的 关系 如 图 
6 -2 所 示 。 

此 时 访问 people2 的 name 和 age 属性 时 ,优先 访问 赋值 时 创建 的 同名 属性 ,因此 pro- 
totype 对 象 中 的 同名 属性 的 访问 渠道 被 阻 断 。 
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People 
Prototype people2 
2 name( “XiaoMing” ) 
| age(18) name( “ZhangSan” ) 
| show0) | age(20) 


图 6 -2 赋值 后 关系 图 


6.3.3 混合 方式 


对 于 以 上 的 两 种 创建 对 象 方法 ,应 该 采用 哪 一 种 好 呢 ? 答案 是 两 种 都 采用 ,以 混合 
的 形式 来 创建 对 象 。 下 面 先 介绍 以 上 两 种 创建 方式 的 各 自 缺 点 。 

1. 原型 方式 的 不 足 

学 ”不 能 传递 属性 值 来 创建 : 

可 以 发 现 , 利 用 prototype( 原型 ) 对 象 设 置 属性 时 ,产生 出 来 的 所 有 实例 都 共享 相同 
的 属性 值 。 当 需要 创建 带 有 不 同属 性 值 的 对 象 时 ,必须 重新 为 对 象 中 的 属性 重新 赋值 属 
性 ,这 样 的 做 法 无 异 于 逐个 添加 属性 的 做 法 ,代码 重复 率 高 ,效率 低下 。 

学 ”属性 值 为 引用 类 型 时 产生 的 问题 。 

上 述 例子 中 的 name 属性 和 age 属性 保存 的 都 是 基本 数据 类 型 值 ,这 样 看 起 来 问题 不 
大 。 但 是 一 旦 属性 值 是 引用 类 型 ,那么 问题 就 出 现 了 。 对 于 引用 类 型 产生 的 对 象 ,它们 
是 保存 在 堆 (heap) 中 ,变量 保存 的 值 只 是 它们 的 引用 。 如 果 直 接 对 这 个 引用 进行 操作 ， 
那么 影响 将 反馈 到 prototype 本 身 , 因 此 所 有 共享 这 个 属性 的 对 象 都 会 受到 影响 ,实现 如 
代码 清单 6 -6 所 示 。 

代码 清单 6-6 


var People = function () {}; 

People. prototype. food = ["apple", "egg"]; 

var people1 = new People(); 

var people2 = new People(); 

people2.food. push( "pear ") ; 

console. log( people1. food) ; //["apple", "egg", "pear"] 
console. log( people2. food) ; //["apple", "egg", "pear"] 


上 述 的 例子 中 ,在 People 构造 函数 的 prototype 对 象 中 加 入 了 一 个 food 的 属性 ,这 个 
属性 保存 的 是 一 个 数组 , 它 是 引用 类 型 ,因此 产生 的 所 有 实例 都 共享 这 个 数组 。 
对 象 people2 除了 原本 的 两 种 食物 外 ,还 喜欢 梨子 ( pear) ,因此 他 往 这 个 属性 值 中 加 
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入 "pear" 值 。 现 在 来 看 看 他 们 的 food 的 输出 结果 ,奇怪 的 是 竟然 连 对 象 peoplel 也 变 得 
喜欢 上 梨子 了 ! 原本 只 对 people2 添加 了 一 个 元 素 ,为 什么 peoplel 也 受到 影响 了 ? 
再 次 回头 看 图 6 -2 ,prototype 对 象 中 的 属性 被 所 有 实例 所 共享 ,对 于 引用 类 型 的 属 
性 值 来 说 ,所 有 实例 都 指向 同一 个 对 象 。 如 果 直 接 对 这 个 属性 值 进行 操作 ,效果 就 直接 
反映 到 这 个 对 象 上 ,因此 共享 这 个 属性 值 的 所 有 实例 都 受到 影响 。 从 上 述 例子 也 可 以 看 
出 用 原型 方法 创建 对 象 的 不 足 之 处 。 
如 果 不 想 改变 prototype 对 象 中 的 属性 值 ,那么 只 好 创建 一 个 新 的 对 象 并 赋值 给 同名 
属性 。 在 本 例 中 就 是 创建 一 个 新 的 数组 并 赋值 给 food 属性 ,如 图 6 -3 所 示 。 
people2. food = ["apple", "egg", "pear"]; 
那么 此 时 同名 属性 就 指向 了 另 一 个 新 的 数组 。 


People 


peoplel prototype people2 
被 得 盖 
ra 
oT ET 


6-3 重新 赋值 后 关系 图 


以 后 都 用 _proto_ 表 示 实 例 可 以 访问 到 prototype 对 象 中 的 共享 属性 和 方法 。 从 图 6 -3 可 
以 看 出 people2 创建 了 一 个 新 的 数组 并 覆盖 了 原来 的 同名 属性 数组 。 

2. 构造 函数 方式 的 不 足 

既然 原型 方式 对 于 共享 属性 时 会 产生 诸多 问题 ,那么 是 否 选择 使 用 构造 函数 方式 就 
好 了 ? 构造 函数 也 有 它 的 不 足 之 处 。 

构造 函数 产生 对 象 的 过 程 中 ,是 先 产生 对 象 , 青 执行 构造 函数 内 部 的 行为 来 为 对 象 
添加 属性 和 方法 。 也 就 是 说 每 个 方法 都 要 在 构造 函数 中 重新 定义 一 遍 , 即 使 方法 名 是 相 
同 的 ,但 是 实际 上 却 指向 了 不 同 的 函数 对 象 。 构 造 函 数 产 生 的 对 象 间 的 关系 如 图 6 -4 
所 示 。 


peoplel people2 | 
本 | 
functionO(} function0() | 
愉 克 
两 个 函数 对 象 


6 -4 实例 间 关 系 


可 以 看 到 下 面 的 例子 ,由 此 来 证 明 实例 中 的 同名 方法 是 不 同 的 两 个 函数 对 象 。 实 现 
如 代码 清单 6 -7 所 示 。 
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var People = function () { 
this. sayHello = function () { 


console. log( " Hello! " ); 


}; 
var peoplel = new People(); 
var people2 = new People(); 


console. log( people1. sayHello = = people2. sayHello); //false 


上 述 例子 使 用 相等 运算 符 来 检测 两 个 实例 的 同名 方法 是 否 指向 同一 个 函数 对 象 , 返 
回 的 结果 是 false。 证 明 利用 构造 函数 为 对 象 添 加 方法 的 过 程 中 定义 了 两 个 行为 完全 一 
模 一 样 的 函数 对 象 。 可 是 实际 上 这 是 没有 必要 的 ,既然 所 有 同类 型 实例 的 函数 都 一 样 ， 
那么 只 需要 定义 一 个 函数 ,然后 所 有 实例 的 方法 名 都 指向 这 个 函数 就 好 了 。 

综 上 所 述 , 只 要 把 构造 函数 方式 和 原型 方法 混合 起 来 使 用 ,就 可 以 满足 需求 。 即 用 
构造 函数 方法 来 为 对 象 添加 属性 ,用 原型 方法 来 让 所 有 实例 的 方法 都 指向 同一 个 函数 
对 象 。 

3. 混合 方式 创建 对 象 

下 面 该 用 混合 的 方法 来 定义 People 类 型 ,实现 如 代码 清单 6 -8 所 示 。 

代码 清单 ”6-8 


var People = function (name，age) { 
this. name = name; 
this. age = agei; 
}; 
People. prototype. sayHello = function () { 
console.log( "你 好 ,我 叫 ”+ this. name); 
}; 
var people1 = new People("XiaoMing", 18); 
var people2 = new People("ZhangSan", 20); 
people1. sayHello( ); /人 "你 好 ,我 叫 XiaoMing" 
people2. sayHello( ); //" 你 好 ,我 叫 ZhangSan" 
console. log( people1. sayHello = = people2. sayHello); //true 


上 述 例子 中 ,利用 构造 函数 为 对 象 添加 了 不 同 的 属性 值 , 利 用 prototype( 原型 ) 使 方 
法 指向 了 同一 个 对 象 。 现 在 实例 间 的 关系 如 图 6 -5 所 示 。 
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People 


prototype | people2 


fanction0 人 } name 
| age 


_proto_ 


图 6 -5 混合 方式 实例 间 关 系 


使 用 混合 方式 创建 对 象 是 最 为 常见 的 方式 ,在 之 后 的 编程 中 也 会 使 用 这 一 种 方式 来 
创建 对 象 。 


6.4 继承 


在 面向 对 象 编程 中 ,继承 是 一 个 非常 重要 的 概念 。 

有 时 候 希 望 一 个 对 象 有 更 多 的 扩展 属性 和 行为 ,于 是 要 对 这 个 对 象 添加 更 多 的 属性 
和 行为 。 但 是 这 个 扩展 后 的 对 象 又 具备 了 之 前 对 象 的 所 有 属性 和 方法 ,因此 通常 就 称 这 
个 扩展 后 的 对 象 继 承 于 之 前 的 对 象 。 被 继承 的 对 象 成 为 父 对 象 ,由 继承 产生 的 扩展 对 象 
称 为 子 对 象 。 

下 面 来 举 一 个 例子 : 

人 作为 对 象 拥有 “ 名字” 和“ 年龄 "等 属性 ,也 拥有 “跑步 "等 方法 。 所 有 的 老师 都 是 
人 ,但 是 老师 除了 拥有 “跑步 "等 方法 之 外 ,还 拥有 “教书 "的 方法 ,也 拥有 “职称 ”的 属性 。 
因此 老师 这 个 类 型 是 在 人 类 型 的 基础 上 扩展 而 来 的 ,人 可 以 做 的 事情 ,老师 都 可 以 做 ,但 
是 老师 可 以 做 的 事情 ,人 就 不 一 定 能 做 了 。 

下 面 开 始 讲述 怎么 从 一 个 People 类 型 继承 且 产生 Teacher 类 型 。 


6.4.1 对 象 冒充 


当 需 要 从 父 对 象 中 继承 所 有 方法 时 ,可 以 利用 到 对 象 冒充 的 方法 。 
函数 内 部 有 一 个 this 的 对 象 ,在 调用 对 象 的 方法 时 ,JavaScript 将 自动 地 把 这 个 对 象 
传 给 函数 的 this 对 象 。 而 一 个 对 象 的 构造 函数 实质 也 是 一 个 函数 ,一 个 对 象 的 属性 在 执 
行 这 个 函数 时 定义 的 ,因此 子 对 象 中 的 属性 可 以 通过 调用 父 对 象 的 构造 本 数 来 对 内 部 的 
属性 进行 定义 ,其 方法 如 下 。 
var People = function (name) { 


this. name = name; 
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var Student = function (name, age) { 
this. superclass = People; 
this. superclass( name); 
delete this. superclass; 
this. age = age; 
} 
在 子 对 象 Student 的 构造 函数 中 ,用 一 个 变量 引用 了 父 对 象 构造 函数 ,并 且 在 内 部 调 
用 该 成 员 方 法 ,由 此 子 对 象 将 this 对 象 传人 到 父 对 象 构造 函数 的 this 对 象 中 ,所 以 对 自身 
进行 了 与 父 对 象 相同 的 属性 定义 操作 ,继承 了 父 对 象 构造 函数 中 定义 过 的 属性 。 之 后 再 
用 delete 删除 superclass 的 引用 ,这 样 以 后 就 不 能 再 调用 它 。 
可 以 输入 以 下 代码 测试 。 
var student = new Student("XiaoMing", 18); 
console. log( student. name) ; // 输 出 XiaoMing 
可 以 看 出 ,Student 继承 了 父 对 象 中 的 name 属性 。 
由 于 这 种 对 象 冒充 继承 方法 的 流行 ,在 JavaScript 的 第 三 版 中 加 入 了 两 个 方法 call( ) 
和 apply( ) ,它们 的 作用 能 够 快速 将 this 对 象 传人 到 某 个 函数 之 中 。 


6.4.2 call( ) 和 apply( ) 方 法 


在 函数 内 部 可 以 利用 this 来 操作 对 象 的 属性 和 方法 ,只 要 利用 call( ) 和 apply( ) 方 
法 , 即 可 指定 一 个 对 象 传 给 函数 的 this, 并 调用 此 函数 。 
1.call() 方 法 
call( ) 方 法 接收 任意 个 参数 ,第 一 个 参数 就 是 指定 传 给 this 的 那个 对 象 ,之 后 的 参数 
指定 了 传递 到 函数 中 的 参数 ,实现 如 代码 清单 6 -9 所 示 。 
代码 清单 ”6-9 


var sayHello = function (arg) { 
console.log( "你 好 ,我 叫 ”+ this. name) ; 
console. log(" 传 进来 的 参数 是 ”+ arg) ; 
}; 
var people = { 
name : "XiaoMing" 
}; 
sayHello. call( people, 123); //" 你 好 ,我 叫 XiaoMing" 
//" 传 进来 的 参数 是 123" 
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定义 了 一 个 sayHello( ) 的 函数 ,函数 内 部 使 用 this 对 象 的 name 属性 ,如 果 没 有 传递 
对 象 给 this ,那么 将 是 没有 定义 的 , 即 显 示 undefined。 但 是 在 上 述 例子 中 ,利用 函数 对 象 
的 call( ) 方 法 ,把 people 对 象 传 给 了 this 对 象 ,并 在 第 二 个 参数 中 传递 数值 123。 可 以 看 
到 函数 调用 时 接收 到 了 this 对 象 ,并 且 传 进来 的 arg 参数 为 数值 123 。 
call( ) 方 法 中 第 二 个 参数 以 后 的 数据 ,都 是 按照 着 顺序 传递 到 函数 参数 的 。 
2. apply( ) 方 法 
apply( ) 方 法 接收 两 个 参数 ,第 一 个 参数 就 是 指定 传 给 this 的 那个 对 象 ,第 二 个 参数 
指定 了 要 传 进去 的 参数 数组 , 即 把 所 有 传 给 函数 参数 的 数据 以 数组 形式 组 合 起 来 ,实现 
如 代码 清单 6 - 10 所 示 。 


代码 清单 ”6 -10 


var sayHello = function (arg1, arg2) { 
console. log(" 你 好 , 我 叫 ”+ this. name); 
console. log(" 传 进来 的 参数 是 "+ arg1 + "和 " + arg2); 
}; 
var people = { 
name : "XiaoMing" 
}; 
sayHello. apply( people, [18, "学生 "] ); /A" 你 好 ,我 岂 XiaoMing" 
//" 传 进来 的 参数 是 18 和 学 生 " 


可 见 数组 中 的 数据 按照 顺序 依次 传递 到 函数 内 部 的 参数 中 。 
3. 调用 父 对 象 构造 函数 
可 以 利用 call( ) 方 法 和 apply( ) 方 法 ,在 子 对 象 的 构造 函数 中 调用 父 对 象 构造 函数 并 
把 this 对 象 转 入 到 父 对 象 的 构造 函数 中 ,从 而 对 子 对 象 的 对 象 添加 同样 的 属性 ,如 下 例 
于 所 示 s 
var People = function (name, age) { 
this. name = name; 
this. age = age; 
} 
var Student = function (name, age, number) { 
People. call( this, name, age); 
this. number = number; 
} 
以 上 Student 对 象 构造 函数 中 的 代码 等 价 于 : 


function Student (name, age, number) { 
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this. name = name; 
this. age = agei; 
this. number = number; 
} 
效果 就 相当 于 把 父 对 象 构 造 函 数 中 的 代码 复制 粘贴 到 子 对 象 的 构造 函数 当中 ,下 面 
测试 一 下 结果 ,实现 如 代码 清单 6 -11 所 示 。 
代码 清单 ”6 -11 


var People = function (name, age) { 
this. name = name; 
this. age = age; 
}; 
var Student = function (name, age, number) { 
People. call( this, name, age); 
this. number = number; 
}; 
var people = new Student("XiaoMing", 18, 12345); 


console. log( people. name) ; //" XiaoMing" 
console. log( people. age) ; //18 
console. log( people. number) ; //12345 


可 见 子 对 象 Student 的 构造 函数 也 能 够 为 对 象 添加 父 对 象 的 属性 。 利 用 call( ) 和 ap- 
ply( ) 方 法 ,就 不 需 在 子 对 象 的 构造 函数 中 重新 编写 父 对 象 中 添加 属性 的 代码 ,减少 了 代 
码 重复 率 。 

不 过 问题 还 没有 解决 ,利用 call( ) 和 apply( ) 方 法 只 能 执行 构造 函数 中 的 行为 ,对 于 
在 prototype 对 象 中 添加 的 方法 ,call( ) 和 apply( ) 方 法 对 此 无 能 为 力 。 因 此 利用 这 种 方法 
无 法 为 子 对 象 添加 父 对 象 ,为 此 下 面 介绍 原型 链 的 继承 方法 。 


6.4.3 原型 链 


原型 链 的 继承 方式 是 实现 继承 的 主要 方式 。 函 数 对 象 的 prototype 对 象 指 向 一 个 对 
象 ,这 个 对 象 中 包含 了 共享 的 属性 和 方法 ,那么 如 果 把 一 个 构造 函数 的 prototype 对 象 指 
向 了 父 对 象 的 一 个 实例 ,这 时 候 由 这 个 构造 函数 产生 的 实例 也 能 共享 到 父 对 象 实例 的 属 
性 和 方法 了 。 更 进一步 ,再 创建 男 一 个 子 对 象 构造 函数 的 prototype 对 象 指向 着 这 个 对 象 
的 实例 ,那么 这 个 子 对 象 又 能 共享 到 父 对 象 的 属性 和 方法 以 及 父 父 对 象 ( 父 对 象 的 父 对 
象 ) 的 属性 和 方法 。 由 此 层 层 递 进 ,就 构成 了 实例 与 原型 的 链条 , 即 所 谓 的 原型 链 。 
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以 下 是 原型 链 的 构成 关系 ,如 图 6 -6 所 示 。 


父 对 象 实例 父 父 对 象 实例 
子 对 象 实例 作为 一 个 原型 对 象 作为 一 个 原型 对 象 
属性 prototype prototype 
方法 属性 属性 
本 方法 方法 

_proto_ 


图 6 -6 原型 链 构成 关系 图 


下 面 来 利用 原型 链 的 方法 继承 父 对 象 测试 实例 ,实现 如 代码 清单 6 -12 所 示 。 
代码 清单 ”6 -12 


var People = function () { 
this. name = "XiaoMing"; 

}; 

People. prototype. sayHello = function () { 
console. log(" 你 好 , 我 叫 ”+ this. name); 

}; 

var Student = function () {}; 

Student. prototype = new People(); 


var people = new Student(); 
people. sayHello( ); //" 大 家 好 , 我 叫 XiaoMing" 


上 面 的 例子 中 ,定义 一 个 Student 构造 函数 ,但 是 这 个 函数 什么 都 不 做 ,只 是 把 proto- 
type 对 象 指向 了 People 类 型 的 实例 ,做 法 是 用 new 产生 一 个 People 的 实例 并 赋值 给 
Student 的 prototype 对 象 。 

然后 创建 一 个 Student 的 实例 ,并 调用 对 象 的 sayHello( ) 方 法 。 可 见 输出 结果 表明 
Student 类 型 的 实例 继承 了 People 的 属性 和 方法 。 此 时 的 继承 关系 如 图 6 -7 所 示 。 


People 实例 


_ 作为 一 个 原型 对 象 People 
子 类 实例 
prototype | | prototype | 
2 name | 一 sayHello() | 
_proto_ 一 | | 


图 6 -7 继承 关系 图 


相信 读者 看 到 继承 图 以 后 ,都 会 发 现 原型 链 继承 中 存在 的 问题 。 可 以 看 到 此 时 父 对 
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象 的 属性 是 放 在 prototype 对 象 中 继承 到 子 对 象 实例 中 的 ,这 种 做 法 就 会 导致 上 一 节 中 提 
到 过 的 问题 , 即 引用 类 型 的 属性 值 被 共享 而 实例 间 相 互 影响 。 所 以 在 继承 过 程 中 ,需要 
把 两 种 继承 方式 结合 起 来 , 即 用 call( ) 或 apply( ) 方 法 来 继承 父 对 象 的 属性 ,用 原型 链 方 
式 来 继承 父 对 象 的 方法 。 


6.4.4 混合 方式 继承 
下 面 利用 混合 方式 来 继承 父 对 象 ,并且 在 子 对 象 中 添加 特有 的 属性 和 方法 ,实现 如 


代码 清单 6 -13 所 示 。 
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var People = function (name) { 
this. name = name; 

}; 

People. prototype. sayHello = function () { 
console. log(" 你 好 , 我 叫 ”+ this. name); 

}; 

var Student = function (name, number) { 
People. call( this, name); 
this. number = number; 

}; 

Student. prototype = new People(); 

Student. prototype. showNumber = function () { 
console. log( "我 的 学 号 是 "+ this. numben) ; 


var people = new Student("XiaoMing", 123456); 
people. sayHello( ); //" 你 好 , 我 叫 XiaoMing" 
people. showNumber( ) ; //123456 


上 例 的 继承 关系 如 图 6 -8 所 示 。 

上 例 中 ,Student 类 型 的 prototype 对 象 赋值 为 父 对 象 People 实例 ,并 在 其 后 直接 添加 
方法 showNumber( ) 来 展示 学 号 。 而 在 构造 了 哨 数 中 先 调用 父 对 象 的 call( ) 方 法 ,相当 于 重 
新 执行 父 对 象 构造 函数 中 的 添加 属性 方法 ,因此 添加 了 同名 属性 name 并 覆盖 掉 prototype 
对 象 中 的 name 属性 ,如 图 6 -9 所 示 。 因 此 不 同 实例 重新 定义 自己 的 属性 值 ,而 不 是 引 
用 prototype 对 象 的 属性 值 ,相互 之 间 不 影响 。 
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People 实例 
Student 对 象 实例 并 添加 额外 方法 People 
| name Prototype prototype 
ndber ng sayHello0 
showNumber0) 
_prolo_ 


图 6-8 继承 关系 图 


利用 call( ) apply( ) 方 法 继承 属性 和 原型 链 继承 方法 是 较为 常见 的 继承 方法 。 当 然 
JavaScript 语言 还 有 其 他 的 继承 方式 ,各 有 优点 ,各 位 读者 可 以 自行 参考 相关 资料 。 而 在 
之 后 的 面向 对 象 编程 当中 ,所 使 用 的 是 上 面 这 种 较为 常见 的 继承 方式 。 

因此 在 继承 关系 中 一 般 的 派生 关系 如 图 6 -9 所 示 。 


父 对 象 实例 父 父 对 象 实例 
于 对 象 实例 作为 一 个 原型 对 象 作为 一 个 原型 对 象 
属性 A i 

prototype prototype 

属性 A EA 

属性 了 FEB 
_proto_ 属性 C 
_prolo_ 


6-9 派生 关系 图 


6.5 多 态 性 实现 


6.5.1 重 写 父 对 象 方法 


除了 简单 地 继承 父 对 象 中 的 方法 以 外 , 子 对 象 还 可 以 在 继承 的 原 有 方法 的 基础 上 增 
添 行为 ,也 就 是 重 写 父 对 象 中 的 同名 方法 。 

知道 一 旦 子 对 象 中 重 写 同 名 方法 ,那么 这 个 重 写 方法 在 子 对 象 中 就 会 覆盖 掉 父 对 象 
的 同名 方法 ,那么 要 怎么 做 才能 保留 父 对 象 中 的 原 有 属性 呢 ? 实现 方法 是 利用 call( ) 或 
apply( ) 方 法 。 

例如 ,在 上 述 例子 的 sayHello( ) 方 法 中 ,不 仅 希 望 能 够 继承 父 对 象 的 行为 ,还 希望 增 
添 一 段 介绍 学 号 的 行为 ,看 到 如 下 的 代码 清单 ,实现 如 代码 清单 6 - 14 所 示 。 
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var People = function (name) { 
this. name = name; 

}; 

People. prototype. sayHello = function () { 
console. log(" 大 家 好 , 我 叫 ”+ this. name); 

}; 

var Student = function (name, number) { 
People. call( this, name); 
this. number = number; 

}; 

Student. prototype = new People(); 

Student. prototype. sayHello = function () { 
People. prototype. sayHello. call( this) ; 
console. log( "我 的 学 号 是 :" + this. number); 

}; 

var student = new Student("XiaoMing", 123456); 

student. sayHello( ); 

/A" 大 家 好 , 我 是 XiaoMing" 

//" 我 的 学 号 是 : 12346" 


继承 父 对 象 行为 的 方法 是 :在 函数 中 再 一 次 调用 父 对 象 的 同名 方法 ,这 样 就 能 够 获 


6.5.2 多 态 性 


取 到 父 对 象 中 相同 的 行为 , 接 下 来 在 下 面 重 新 添加 子 对 象 自己 的 行为 ,这 样 就 可 以 做 到 
重 写 父 对 象 方法 并 且 增添 父 对 象 的 行为 。 


在 面向 对 象 编程 当中 ,多 态 性 是 非常 重要 的 一 个 特性 。 它 的 含义 是 指 : 对 于 许多 不 


同类 的 对 象 ,它们 都 有 共同 的 基 对 象 ,在 调用 同名 的 方法 时 ,它们 能 够 产生 各 自 不 同 的 行 
为 ,这 就 是 面向 对 象 中 的 多 态 性 。 


举 个 简单 的 例子 ,人 对 象 People 和 学 生 对 象 Student 都 有 一 个 sayHello( ) 的 方法 ,而 


People 的 行为 是 介绍 自己 的 名 字 ,Student 对 象 的 行为 是 介绍 自己 的 名 字 和 学 号 ,因此 对 
于 同一 个 方法 sayHello( ) ,对 不 同 对 象 就 会 有 不 同 的 行为 。 


可 见面 向 对 象 的 多 态 性 是 基于 子 对 象 的 重 写 ( override) 方 法 的 基础 上 ,在 上 述 代 码 清 


单 6 -14 基础 上 增加 以 下 的 演示 例子 ,实现 如 代码 清单 6 -15 所 示 。 
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var People = function (name) { 
this. name = name; 

}; 

People. prototype. sayHello = function () { 
console. log(" 大 家 好 , 我 叫 ”+ this. name) ; 

}; 

var Student = function (name, number) { 
People. call(this, name); 
this. number = number; 

}; 

Student. prototype = new People(); 

Student. prototype. sayHello = function () { 
People. prototype. sayHello. call( this) ; 
console. log( "我 的 学 号 是 :" + this. number); 

}; 

var obj = new People("XiaoMing"); 

obj. sayHello( ) ; 

//" 大 家 好 , 我 是 XiaoMing" 

obj = new Student("ZhangSan", 123456); 

obj. sayHello( ); 

//" 大 家 好 ,我 是 ZhangSan" 

/A" 我 的 学 号 是 : 12346" 


当 变 量 obj 指向 People 的 实例 时 ,那么 调用 的 sayHello( ) 方 法 就 是 People 对 象 的 方 
法 ;而 当 obj 指向 Student 的 实例 时 ,那么 调用 的 sayHello( ) 方 法 就 指向 了 子 对 象 Student 
的 对 应 方法 , 即 增添 了 子 对 象 自己 的 行为 。 

其 中 多 态 性 的 关系 如 图 6 - 10 所 示 。 

由 于 在 子 对 象 Student 中 重 写 了 sayHello( ) 的 同名 方法 ,因此 Student 实例 对 原始 
People 原型 中 的 sayHello( ) 方 法 的 引用 被 覆盖 , 即 通过 Student 实例 调用 sayHello( ) 方 法 
时 ,实际 调用 的 是 被 重 写 过 的 sayHello( ) 方 法 。 

而 通过 People 实例 调用 sayHello( ) 方 法 时 ,调用 的 还 是 原始 原型 中 的 sayHello( ) 方 
法 。 因 此 一 个 变量 指向 的 对 象 不 同时 ,调用 同名 的 方法 所 产生 的 行为 也 会 有 所 差异 ,这 
也 就 是 面向 对 象 编程 中 的 多 态 性 。 
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本 People 实例 
Shuden 实 例 作为 Sutdent 的 原型 People 原型 People 实例 
_proto_ prototype prototype _proto_ 
name _proto_ pp sayHello() | name 
number name 
sayHello0) 
consolelog(“ 大 家 好 ……”) consolelog( “大 家 好 …” ) 
console.log(“ 我 的 学 号 ……”) 
图 6 -10 多 态 性 关系 
1 
6.6 小 结 


在 JavaScript 中 有 两 种 创建 对 象 的 方法 ,分 别 是 

学 ”构造 函数 法 

学 ”原型 方法 

目前 通用 的 继承 方式 是 把 两 种 方式 结合 起 来 ,利用 构造 函数 法 定义 对 象 的 属性 , 利 
用 原型 方法 定义 对 象 的 方法 。 通 过 new 运算 符 创 建 对象 以 后 ,对 象 便 拥 有 了 自己 的 一 份 
属性 和 共享 的 一 套 方法 。 

继承 方法 中 也 分 为 有 

党” 对象 冒充 

学 call() 和 apply() 方 法 

学 ”原型 链 

这 里 同样 利用 了 混合 的 方式 进行 继承 ,利用 函数 对 象 的 call( ) 和 apply( ) 方 法 继承 父 
对 象 中 的 属性 ,利用 原型 链 继承 父 对 象 的 方法 。 

子 对 象 可 以 重 写 父 对 象 中 的 同名 方法 , 重 写 后 子 对 象 的 方法 就 指向 了 另 一 个 方法 ， 
所 以 当 对 一 个 父 对 象 的 对 象 和 另 一 个 子 对 象 的 对 象 调用 同一 个 方法 时 ,它们 的 行为 会 不 
相同 ,这 也 就 是 面向 对 象 编程 中 的 多 态 性 。 


6.7 习题 


1. JavaScript 是 一 种 对 象 的 编程 语言 。 
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2. 对 象 中 的 this 对 象 指 代 的 是 

3. 一 个 对 象 的 constructor 属性 指向 的 是 

4. 下 列 语句 中 错误 的 是 o 

A. 定义 一 个 对 象 的 做 法 是 .“var People = function (name) |1”。 

B. 定义 一 个 对 象 的 做 法 是 “function People(name) | 1”。 

C. 创建 一 个 对 象 的 做 法 是 :var obj = People(" XiaoMing" )”。 

D. 创建 一 个 对 象 的 做 法 是 : “var obj = new People("XiaoMing" )”。 

5. 以 下 有 关 原 型 prototype 的 叙述 中 ,不 正确 的 是 5 

A. 在 原型 中 定义 的 方法 被 所 有 实例 共同 引用 。 

B. 在 原型 中 定义 的 引用 类 型 的 属性 值 , 每 个 实例 各 自 保存 一 份 ,操作 互 不 影响 。 

C. 在 原型 中 定义 的 基本 类 型 的 属性 值 ,每 个 实例 各 自 保存 一 份 ,操作 互 不 影响 。 

D. 所 有 实例 都 能 访问 到 原型 中 定义 的 属性 和 方法 。 

6. 下 面 有 关 构 造 函 数 的 说 法 ,错误 的 是 o 

A. 构造 函数 也 是 一 个 函数 对 象 。 

B. 构造 函数 内 部 有 this 对 象 , 非 构造 函数 的 内 部 没有 this 对 象 。 

C. 调用 父 对 象 构造 函数 可 以 调用 函数 对 象 的 方法 call( ) 和 apply( ) 。 

D. 调用 父 对 象 构造 函数 只 能 继承 在 构造 函数 中 定义 的 属性 和 方法 ,而 原型 定义 的 属 


性 和 方法 则 没有 继承 下 来 。 


7. 有 两 个 对 象 A 和 B, 若 要 令 B 对 象 继承 于 A 对 象 ,那么 以 下 的 语句 正确 的 
A.B. prototype = A()。 

B. B. prototype = new A()。 

C.B. constructor = A()。 

D. B. constructor = new A()。 


8. 两 个 对 象 A 和 B, 其 中 A 对 象 是 B 对 象 的 父 对 象 ,那么 以 下 结果 输出 正确 的 


o 


A. A instanceof Object 为 false。 
B. A instanceof B 为 true。 

C. typeof A 为 object。 

D. B instanceof A 为 true。 
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HTMLS 中 最 令 人 振奋 的 新 特性 莫 过 于 加 入 了 < canvas > 这 个 新 的 元 素 , 这 个 元 素 支 
持 直接 在 浏览 器 上 绘制 图 形 。 结 合 浏览 器 的 其 他 功能 ,可 以 实现 特色 的 动画 和 交互 设 
计 。 本 章 开 始 介绍 Canvas( 画布 ) 的 基本 绘制 功能 。 


7.1 <canvas > 元 素 


在 开始 之 前 , 先 看 一 下 画布 上 的 显示 “Hello World” ,实现 如 代码 清单 7-1 所 示 。 


代码 清单 7-1 
<!DOCTYPE HTML > 
<HTML > 
<head > 


<title > canvas 元 素 </title > 
</head > 
<body > 
<canvas id = "myCanvas" width ="200" height ="200" style = "border' solid" > 
你 的 浏览 器 不 支持 canvas 画布 元 素 , 请 更 新 浏览 器 获得 演示 效果 . 
</canvas > 
< Script type = "text/javascript”> 
var canvas = document. getElementByld(" myCanvas " ) ; 
var context = canvas. getContext( "2d " ) ; 
context. font = "30px Arial " ; 
context. filText(" Hello World! ", 10, 100); 
context. lineWidth = 3; 
context. moveTo( 10, 110); 
context. lineTo( 180, 110); 
context. stroke( ); 


</script > 
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</body > 
</HTML > 


上 述 例子 效果 图 如 图 7 -1 所 示 。 


Hello World! 


7-1 画布 上 的 “Hello World” 


7.1.1 引入 <canvas > 元 素 


要 在 网 页 中 使 用 画布 进行 作 图 ,第 一 步 首先 要 引入 < canvas > 元素, 并 设置 其 显示 大 
小 。 因 此 在 < body > 元 素 间 加 入 一 块 画布 : 

<canvas id ="myCanvas" width ="200" height = "200" > 

你 的 浏览 器 不 支持 canvas 画布 元 素 , 请 更 新 浏览 器 获得 演示 效果 。 

< canvas > 

在 < canvas > 元 素 内 设置 了 宽度 和 高 度 值 , 即 width = "200" 和 height = "200" 。 另 外 
还 在 元 素 中 设置 了 一 个 属性 “id” ,这 个 属性 值 为 在 之 后 的 JavaScript 代码 中 获取 画布 元 
素 提供 了 标记 ,只 有 获取 了 画布 才能 对 画布 进行 操作 。 

读者 可 以 看 到 例子 中 的 canvas 元 素 中 还 有 一 个 设置 :style = " border:solid" ,这 个 设 
置 属于 网 站 的 级 联 样式 表 (CSS) ,在 这 里 设置 的 目的 是 为 了 把 画布 的 边界 显示 出 来 ,如 
图 7 -1 中 的 黑 框 。 这 样 就 能 够 看 清 画 布 在 浏览 器 中 的 占据 范围 。 

在 < canvas > 元 素 之 间 可 以 添加 文字 ,如 果 浏 览 器 不 支持 canvas 元 素 , 那 么 将 会 显示 
这 段 提醒 文字 ,告知 浏览 器 用 户 这 里 是 画布 元 素 。 目 前 各 大 浏览 器 对 canvas 元 素 的 支持 
度 都 很 好 ,除非 一 些 老式 浏览 器 ,否则 都 能 够 正常 显示 canvas 元 素 中 的 内 容 。 


7.1.2 获取 上 下 文 


引入 < canvas > 元 素 后 ,要 在 JavaScript 代码 中 设法 获取 到 这 个 元 素 对 象 ,对 其 进行 
操作 。 现 在 可 以 利用 之 前 设置 的 属性 “id” 获取 到 canvas 元 素 对 象 : 
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var canvas = document. getElementByld(" myCanvas"); 

上 面 的 语句 中 ,或 许 读者 对 document 对 象 不 熟悉 。 这 里 的 document 对 象 指 的 是 
HTML 中 的 文档 对 象 模型 (DOM) ,读者 可 以 参见 “基本 概念 "一 章 中 的 相关 内 容 。 也 就 是 
说 ,JavaScript 把 HTML 上 的 内 容 看 成 是 一 个 对 象 , 可 以 利用 对 象 上 的 方法 来 访问 到 文档 
中 的 任意 节点 并 操作 它们 。 

所 以 上 面 的 语句 是 利用 document 对 象 的 getElementById( ) 方 法 ,通过 预先 设置 好 的 
属性 “id" 来 获取 对 应 的 元 素 对 象 ,而 这 个 “myCanvas" 就 是 引入 的 canvas 元 素 。 

现在 变量 canvas 已 经 保存 了 canvas 元 素 对 象 的 引用 ,可 以 对 这 个 元 素 进行 不 同 的 操 
作 , 可 以 通过 width 和 height 属性 修改 画布 的 宽度 和 高 度 ,或 者 通过 CSS 修改 它 的 样式 。 

不 过 要 在 这 块 画 布 上 绘图 ,还 需要 一 些 额 外 的 操作 ,就 是 获取 绘图 上 下 文 (context) ， 
方法 就 是 调用 元 素 对象 canvas 的 getContext( ) 方 法 ,并 传人 上 下 文 的 名 字 来 获取 相应 的 
上 下 文 对 象 。 

var context = canvas. getContext("2d"); 

不 少 初学 者 对 此 有 疑问 :为 什么 不 是 直接 对 canvas 元 素 进行 绘图 操作 ,而 是 还 要 获 
取 上 下 文 内 容 ? 打 个 比方 ,你 获得 了 一 本 绘图 本 ,但 是 还 不 能 进行 绘画 ,还 需要 获得 一 套 
绘图 工具 和 懂得 绘图 的 方法 ,这 样 才 能 在 绘图 本 上 作画 。 这 里 的 绘图 本 就 是 canvas 元 
素 ,绘图 工具 和 方法 就 是 上 下 文 (context) 对 象 ,上 下 文 对 象 包含 了 绘图 需要 的 方法 和 属 
性 ,通过 调用 其 中 的 方法 来 对 canvas 进行 绘图 。 

通过 方法 getContext( ) 传人 一 个 字符 串 "“2d" 获 取 其 中 的 2D 上 下 文 ,可 以 看 到 canvas 
元 素 还 支持 3D 绘图 的 功能 (如 WebGL) ,这 里 只 讲述 2D 上 下 文 的 绘图 方法 。 

可 以 用 一 个 变量 context 保存 对 这 个 2D 上 下 文 的 引用 ,这 个 上 下 文 对 象 包含 了 绘图 
的 属性 ,如 颜色 、 字 体 、 线 宽 等 ,以 及 包含 了 一 套 绘图 的 方法 ,如 面 线 、 面 加 和 描述 文字 。 
在 例子 中 改变 了 字体 属性 context. font, 还 有 利用 描绘 文字 和 面 线 的 方法 来 呈现 绘图 的 
效果 。 

下 面 将 详细 介绍 2D 上 下 文中 包含 的 属性 和 绘图 方法 。 


7.2 绘制 简单 图 形 


7.2.1 绘制 直线 


在 纸 上 绘 图 步骤 应 该 是 : 先 确 定 要 面 什么 ,在 脑 中 描绘 出 要 绘制 的 轮廓 ,然后 才 会 动 
手 把 想 象 中 的 画面 绘制 在 纸 上 。 而 在 canvas 上 的 绘图 也 有 相似 的 步 又。 
“2 
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学 ”绘制 指定 的 绘图 路 径 。 

学 ”按照 绘图 路 径 对 画布 进行 描 边 ,或 者 对 路 径 包围 的 区 域 进行 填充 。 

因此 在 开始 绘图 之 前 ,首先 获取 画布 的 上 下 文 对 象 context。 然 后 ,开始 调用 绘图 方 
法 ,把 要 绘制 的 线段 或 图 形 绘制 下 来 。 不 过 这 时 候 还 看 不 到 绘图 结果 ,因为 上 面 的 步骤 
只 是 构建 绘图 路 径 ,那么 路 径 确 定 以 后 ,还 要 用 * 笔 "把 它们 画 下 来 ,这 时 候 就 要 利用 
stroke( ) 方 法 来 描 边 或 者 利用 名 1( ) 方 法 来 填充 区 域 。 

绘制 任何 线段 之 前 ,都 先 要 选 定 一 个 线段 的 起 点 ,通常 这 个 起 点 称 作 绘 图 游标 。 移 
动 绘图 游标 可 以 调用 moveTo(x, y) 方 法 ,这 方法 接收 两 个 参数 ,分 别 是 游标 的 横 坐 标 和 
纵 坐标 ,默认 情况 下 绘图 游标 在 原点 位 置 (0,0) 。 

然后 调用 lineTo(x, y) 方 法 ,从 当前 游标 位 置 绘制 一 条 线段 到 指定 位 置 ,这 个 方法 接 
收 的 两 个 参数 就 是 指定 位 置 的 横 坐 标 和 纵 坐 标 。 

最 后 调用 stroke( ) 方 法 , 沿 着 刚刚 的 线段 描绘 一 条 直线 出 来 ,实现 代码 如 代码 清单 
7 -2 所 示 ( 其 中 只 保留 JavaSeript 代码 ,完整 HTML 文档 可 以 见 代码 清单 ) 。 

代码 清单 ”7 -2 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 

context. moveTo( 10, 10); 

context. lineTo( 180,90); 


context. stroke( ); 


效果 如 图 7 -2 所 示 : 


图 7-2 线段 


从 点 (10,10) 开 始 向 点 (180 ,90) 画 一 条 线段 ,其 实 读者 可 以 发 现 画布 的 坐标 系 与 数 
学 的 坐标 系 有 点 不 一 样 。 画 布 的 坐标 系 是 以 左上 和 角 为 坐标 原点 的 ,x 正方 向 往 右 ,y 正方 
向 往 下 ,如 图 7 -3 所 示 。 

看 完 例子 读者 是 不 是 觉得 在 画布 上 的 绘图 也 是 一 件 很 简单 的 事情 ? 下面 将 介绍 更 
多 的 绘图 方法 和 绘图 中 的 属性 。 
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height 


图 7-3 画布 坐标 系 


7.2.2 线条 属性 


可 以 设置 上 下 文中 的 线条 属性 ,使 描绘 的 线段 有 不 同 的 样式 。 在 绘图 中 关于 线 型 的 
属性 一 共有 5 种 ,分 别 是 : 线 颜色 、 线 宽度 . 线 帽 样式 . 线 连 接 处 样式 .斜率 限制 和 线 型 
(lineDash ) 。 

1. 线 颜 色 strokeStyle 

属性 strokeStyle 控制 描 边 的 线条 颜色 ,应 该 在 绘图 之 前 先 设置 好 描 边 颜色 ,那么 之 后 
绘制 的 所 有 线条 都 是 设置 过 的 颜色 ,直到 再 次 改变 线条 颜色 。 其 值 可 以 是 CSS 颜色 字 
串 ,也 可 以 是 CanvasGradient 或 者 CanvasPattern 对 象 ,非法 的 值 将 被 忽略 。 

CSS 中 的 颜色 表示 可 以 是 "#FFF" "#FFFFFF" “rgb(255,255,255,1)” 和 字符 串 


第 一 种 表示 方式 中 ,每 一 个 字符 分 别 表示 红 、 绿 、 蓝 的 程度 ,可 见 十 六 进 制 中 一 种 颜 
色 有 16 色 。 

第 二 种 表示 方式 中 ,每 两 个 字符 表示 颜色 程度 ,可 见 有 256 种 颜色 ,颜色 丰富 很 多 。 

第 三 种 方式 除了 RGB 颜色 外 还 带 有 一 个 透明 度 alpha, 范围 是 0 到 1,1 表示 保持 不 
透明 度 ,0 表示 完全 透明 。 

第 四 种 方式 就 是 用 字符 串 来 表示 颜色 ,有 “red”、“blue” 等 。 

数值 越 大 表明 颜色 成 分 越 多 , 若 3 个 颜色 成 分 都 是 0 ,那么 表示 黑色 , 若 3 个 成 分 都 
为 最 大 值 ,那么 表示 白色 。 以 下 4 种 设置 方法 都 表示 红色 。 

context. strokeStyle = "#F00"; 

context. strokeStyle = "#FF0000"; 

context. strokeStyle = "rgba(255, 0, 0, 1)"; 


context. strokeStyle = "red"; 

2. 线 宽度 lineWidth 

属性 lineWidth 表示 线条 的 宽度 ,单位 是 像素 ,默认 值 是 1。 
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context. lineWidth = 3; 

上 面 的 语句 把 线 宽 设置 为 3。 

3. 线 帽 样式 lineCap 

属性 lineCap 表示 的 是 线段 末端 的 样式 ,一 共有 3 种 不 同样 式 ,分 别 是 " butt" 、" 

round" square" 。 设置 方法 如 下 。 
context. lineCap = "butt"; 


context. lineCap = "round"; 
context. lineCap = "square"; 


3 种 不 同 线 帽 样式 效果 如 图 7 -4 所 示 。 
I Dutt 
GE r OunNd 
I Sq Ua re 


图 7 -4 3 种 线 帽 样式 
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过 ”butt 样式 ,每 根 线 的 头 端 和 尾 端 都 是 长 方形 ,也 就 是 不 做 任何 的 处 理 ,为 默认 值 。 


学 round 样式 ,每 根 线 的 头 和 尾 都 增加 一 个 半圆 ,可 见 图 中 比 buff 样式 额外 突出 一 
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个 半圆 。 
党 square 样式 ,每 根 线 的 头 和 尾 都 增加 一 个 长 方形 ,突出 长 度 为 线 宽 一 半 ,高 度 保 
持 为 线 宽 。 


如 果 线 条 的 线 宽 较 小 ,那么 可 能 看 不 出 区 别 , 上 图 是 把 线 宽 设 置 为 15 的 效果 。 

4. 线 连接 处 样式 lineJoin 

lineJoin 设置 线段 在 拐弯 处 的 连接 样式 , 即 在 线段 拐弯 处 呈现 的 样式 ,共有 3 种 不 同 
样式 ,分 别 是 "miter" "round" "bevel" 。 设 置 方法 如 下 。 

context. lineJoin =“miter ; 

context. lineJoin = "round"; 

context. lineJoin = " bevel"; 


3 种 不 同 连 接 处 样式 效果 如 图 7 -5 所 示 。 


IE miter 
| round 
| bevel 


图 7 -5 3 种 线段 连接 样式 
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学 miter 样式 ,线段 在 连接 处 外 侧 延 伸 直 至 交 于 一 点 ,为 默认 值 ,外 延 效 果 受 miterLimit 
属性 值 影 响 , 当 外 延 交 点 距离 大 于 限制 值 时 , 则 表现 为 bevel 风格 ,下 文 会 介绍 miterLimit。 

学 ”round 样式 ,连接 处 是 一 个 圆 角 , 圆 的 半径 等 于 线 宽 一 半 。 

学 ”bevel 样式 ,连接 处 为 斜 角 , 斜 角 的 角度 与 两 直线 夹 角 相 同 。 

同样 在 线 宽 较 小 时 可 能 看 不 出 效果 。 


5. 斜率 限制 miterLimit 
lineJoin 属性 为 " miter" 时 的 效果 受到 miterLimit 属性 影响 ,miterLimit 默认 值 为 10 , 即 外 


侧 延伸 时 两 条 线 交汇 处 内 角 和 外 角 之 间 的 距离 。 如 图 7 -6 所 示 。 


图 7-6 和 斜 接 长 度 


图 中 两 直线 间 便 是 所 谓 的 斜 接 长 度 , 而 设置 的 属性 miterLimit 就 是 斜 接 长 度 限制 ,一 旦 
实际 长 度 大 于 所 设 限制 值 时 ,连接 效果 便 会 变 成 bevel 样式 。 


6. 线 型 (lineDash) 
线 型 (lineDash) 设置 线条 的 虚实 样式 ,其 中 的 实 线段 和 空白 段 的 比例 可 以 由 来 设置 。 


通过 setLineDash( ) 方 法 来 设置 线 型 ,这 个 方法 接收 一 个 数组 作为 参数 ,数组 的 元 素 为 实 线 
段 的 长 度 和 空白 段 的 长 度 , 单 位 为 像素 px。 设 置 方法 
context. setLineDash( segments) ; 
表 7 -1 列 出 不 同 数组 元 素 组 合 而 形成 的 线 型 。 
表 7-1 线 型 样式 
数组 组 合 线 
Ia 到] 二 一 一 一 一 一 一 一 
[5, 5] 
[lo 5 5 5 
[2, 2] 


可 以 随意 组 合 出 想 要 的 线 型 。 

以 上 第 一 组 线 型 中 ,数组 [10, 5] 表 示 的 是 10 个 像素 的 实 线 和 5 个 像素 的 空白 段 重复 
拼凑 而 组 合成 的 线 型 。 同 理 ,[5, 5] 表 示 的 是 5 个 像素 的 实 线 和 5 个 像素 的 空白 段 组 合成 
线段 。 而 [10, 5, 5, 5] 则 以 10 个 像素 的 实 线 和 5 像素 空白 和 5 像素 实 线 和 5 像素 空白 为 
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一 个 周期 组 成 一 条 线 型 。 
不 过 在 这 里 提醒 读者 一 下 ,这 个 函数 对 浏览 器 的 支持 不 太 完善 ,用 Google 浏览 器 和 
FireFox 测试 了 一 下 ,只 有 Google 浏览 器 支持 该 也 数 ,而 FireFox 则 出 现 错误 。 


7.2.3 闭合 图 形 
可 以 调用 closePtah( ) 方 法 把 绘制 的 路 径 闭合 起 来 ,也 就 是 说 把 路 径 的 最 后 一 点 与 最 开 


始 的 一 点 连接 起 来 ,使 之 形成 一 个 闭合 的 路 径 ,实现 如 代码 清单 7 -3 所 示 。 
代码 清单 ”7 -3 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. beginPath() ; 

context. moveTo( 10, 10); 

context. lineTo( 180, 90); 

context. lineTo(20, 80); 

context. closePath( ); 

context. stroke( ); 


效果 如 图 7 -7 所 示 。 
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7-7 闭合 图 形 


在 例子 中 连续 使 用 了 两 个 lineTo( ) 方 法 ,从 第 一 段 线段 的 终点 开始 绘制 到 下 一 点 , 即 绘 
图 游标 会 跟随 着 绘图 函数 所 移动 。 只 画 了 两 段 线段 ,但 是 最 后 调用 closePath( ) 方 法 把 头 尾 
两 点 闭合 起 来 ,所 以 效果 就 成 了 一 个 三 角形 。 

这 里 需要 提 一 点 的 是 :如 果 只 有 一 条 线段 ,那么 closePath( ) 方 法 什么 也 不 做 。 

对 于 一 个 闭合 图 形 , 可 以 调用 所 ( ) 方 法 填充 图 形 所 包围 的 区 域 ,默认 的 填充 颜色 为 黑 
色 , 但 是 可 以 通过 fillStyle 属性 修改 到 指定 颜色 值 。 下 面 用 亿 !( ) 方 法 填充 上 述 例子 中 的 三 
角形 ,实现 代码 如 代码 清单 7-4 所 示 。 
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代码 清单 ”7 -4 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. beginPath() ; 

context. moveTo( 10, 10); 

context. lineTo( 180, 90); 

context. lineTo(20, 80); 

context. closePath( ); 


context. fill( ) ; 


效果 如 图 7 -8 所 示 。 


7 -8 填充 效果 图 


可 以 看 到 只 是 把 代码 的 stroke( ) 方 法 改 成 了 fl( ) 方 法 , 即 把 描 边 改 成 了 填充 。 当 然 可 
以 同时 调用 这 两 个 方法 ,配合 不 同 的 描 边 颜色 和 填充 颜色 ,会 有 良好 的 视觉 效果 。 

不 过 对 于 填充 方法 fll( ) 来 说 ,即使 不 调用 closePath( ) 方 法 也 可 以 调用 成 功 ,fl1( ) 方 法 
会 按照 路 径 闭合 后 的 结果 来 填充 包围 的 区 域 。 如 果 路 径 只 是 一 条 线段 ,那么 亿 ( ) 方 法 也 
没有 效果 。 

fillStyle 属性 值 跟 strokeStyle 属性 值 一 致 ,可 以 是 CSS 颜色 字 串 ,也 可 以 是 CanvasGradi- 
ent 或 者 CanvasPattern 对 象 ,其 中 CanvasGradient 或 者 CanvasPattern 对 象 将 于 “Canvas 高 级 
功能 "一 章 中 讲述 。 


7.2.4 绘制 矩形 


画布 提供 了 一 个 方法 来 快速 绘制 矩形 路 径 , 即 rect(x, y，width ，height ) 方 法 。 这 个 方 
法 接收 4 个 参数 ,前 两 个 为 矩形 左上 角 的 位 置 ;其 后 两 个 参数 分 别 为 宽度 和 高 度 。 实 现 如 代 
码 清 单 7 -5 所 示 。 
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代码 清单 7 -5 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. rect(20, 20，150，80); 


context. stroke( ); 


效果 如 图 7 -9 所 示 。 


图 7-9 德 形 


如 果 把 stroke( ) 方 法 替换 为 il( ) 方 法 ,那么 效果 就 是 填充 矩形 包围 的 区 域 。 

除 此 以 外 ,画布 还 提供 了 两 个 便捷 的 方法 来 描 边 矩形 和 填充 矩形 , 那 就 是 strokeRect(x， 
y, width, height) 和 人 IRect(x, y, width, height) 方 法 ,这 两 个 方法 接收 的 参数 与 rect( ) 方 法 
一 样 。 它 们 的 效果 分 别 为 

strokeRect(x，y，width，height) 的 效果 等 价 于 

context. rect( x, y, width, height); 

context. stroke( ); 

filRect(x，y，width，height) 的 效果 等 价 于 

context. rect( x, y, width, height); 

context. fill( ); 

实现 如 代码 清单 7 -6 所 示 。 

代码 清单 7-6 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. strokeRect(20, 20,60, 80); 

context. fillRect( 100, 20, 60，80); 


效果 如 图 7 - 10 所 示 。 
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图 7-10， 描 边 和 填充 矩形 


这 里 还 介绍 一 个 clearRect(x，y，width ，height ) 的 方法 ,不 过 这 个 方法 并 不 是 绘制 矩 
形 , 而 是 擦 除 一 个 矩形 区 域 。 参 数 含 义 与 其 他 和 矩形 方法 一 致 。 这 个 方法 会 擦 除 指定 矩形 区 
域 中 的 所 有 像素 ,使 画布 变 回 原始 状态 ( 即 透明 黑 状 态 ) ,实现 如 代码 清单 7 -7 所 示 。 
代码 清单 7-7 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. fillRect(30,30,150，100); 

context. clearRect(50, 50, 80, 50); 


context. stroke( ); 


效果 如 图 7 -11 所 示 


7-11 控 除 矩形 区 域 


先 填充 一 个 矩形 ,然后 在 矩形 内 部 再 氛 除 一 个 和 矩形 区 域 。 这 里 要 提 一 下 的 是 :画布 的 
原始 状态 为 透明 黑 , 即 黑色 且 完 全 透明 ,所 以 看 不 见 黑色 ,只 能 看 到 网 页 文档 的 背景 色 ( 白 
色 ) 。 因 此 如 果 使 用 方法 检测 画布 的 颜色 ,返回 的 结果 将 是 黑色 ,而 不 是 白色 。 


7.2.5 ”绘制 圆 弧 


不 仅 可 以 绘制 直线 的 图 形 , 还 可 以 使 用 方法 arc(x, y, radius, startAngle, endAngle, an- 
ticlockwise ) 来 绘制 一 个 圆 弧 。 其 中 xy 参数 是 圆 弧 中 心 坐 标 ,radius 是 圆 弧 的 半径 ,startAn- 


20: 


CEY HTML 二 动画 卉 用 去 戈 
gle 和 endAngle 是 圆 弧 的 起 始 角 度 和 终止 角度 ,其 中 角度 单位 是 弧度 制 。 最 后 一 个 参数 an- 
ticlockwise 表示 圆 弧 的 绘制 方向 ,false 表示 顺 时 针 方 向 绘制 ,true 表示 逆 时 针 方 向 绘制 ,省 
略 情况 下 为 顺 时 针 方向 绘制 。 

绘制 圆 弧 的 实现 如 代码 清单 7 -8 所 示 。 
代码 清单 ”7 -8 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

var degToRad = Math. PI / 180; 

context. arc( 100, 70, 50, 0, 90 * degToRad, true); 


context. stroke( ); 


绘图 效果 如 图 7 -12 所 示 。 


7-12 绘制 圆 弧 


最 后 传人 true 表示 圆 弧 按 着 逆 时 针 方 向 绘制 。 可 见 所 谓 的 起 始 和 终止 角度 就 是 与 x 
轴 正 方向 的 夹 角 ,并 且 角 度 以 顺 时 针 方 向 增 大 。 
如 果 想 要 绘制 一 个 圆 形 , 那 么 只 要 把 起 始 角 度 和 终止 角度 之 差 设置 为 360 度 的 倍数 
即 可 。 
绘制 一 个 圆 形 的 实现 如 代码 清单 7 -9 所 示 。 
代码 清单 7 -9 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

var degToRad = Math. PI / 180; 

context. arc( 100, 70, 50, 0, 360 * degToRad, true); 


context. stroke( ); 
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绘图 效果 如 下 图 7 -13 所 示 。 


图 7-13 圆 形 


下 面 来 思考 以 下 两 种 情况 : 
学 ”如 果 绘 制 圆 弧 之 后 ,调用 方法 closePath( ) 闭 合 路 径 ,结果 会 怎样 ? 
学” 如果 绘制 圆 绝 之 后 ,调用 方法 全 ( ) 填 充 圆 弧 ,结果 会 怎样 ? 
下 面 来 测试 一 下 结果 ,实现 如 代码 清单 7 - 10 所 示 。 
代码 清单 7-10 
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var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

var degToRad = Math. PI / 180; 

context. lineWidth = 2; 

context. beginPath() ; 

context. arc(60, 70, 50, 0, 135 * degToRad, true); 
context. closePath( ); 


context. stroke( ); 


context. beginPath( ); 
context. arc( 180, 70, 50, 0, 135 * degToRad, true); 


context. fill( ); 


效果 如 下 图 7 -14 所 示 。 


图 7-14 closePath( ) 和 fil( ) 效果 
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HTML 二 动画 卉 去 均 苞 
可 见 closePath( ) 方 法 只 是 把 头 尾 两 点 连接 起 来 ,并 不 会 自动 补充 圆 弧 。 同 样 地 1( ) 
方法 填充 的 是 头 尾 相连 后 的 闭合 图 形 ,并 不 是 一 个 贺 。 


7.2.6 贝 塞 尔 曲线 


在 数学 中 , 贝 赛 尔 曲线 (Bezier curve) 是 电脑 图 形 学 中 相当 重要 的 参数 曲线 。 在 画布 中 
可 以 通过 两 个 方法 来 绘制 贝 赛 尔 曲线 ,分 别 是 二 次 贝 塞 尔 曲线 quadraticCurveTo( controlx， 
controly, x, y) 和 三 次 贝 塞 尔 曲线 bezierCurveTo( controlxl ，controlyl ，controlx2 ，controly2 ， 
x, y) ,它们 的 区 别 主 要 在 于 控制 点 数目 不 同 。 

1. 二 次 贝 塞 尔 曲线 

贝 塞 尔 曲线 都 通过 控制 点 来 控制 它们 的 弯曲 程度 ,其 中 的 关系 是 由 贝 塞 尔 方程 来 确定 
的 ,这 里 只 讨论 它们 的 绘制 方法 。 

quadraticCurveTo( controlx ,controly, x, y) 方 法 接收 4 个 参数 ,前 两 个 是 曲线 的 控制 点 ; 
后 两 个 是 曲线 的 终止 点 。 曲 线 只 经 过 绘图 起 点 和 终止 点 , 且 曲 线 的 弯曲 方式 和 程度 受 控制 
点 影响 。 

二 次 贝 塞 尔 曲线 实现 如 代码 清单 7-11 所 示 。 

代码 清单 7-11 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. moveTo( 30, 30); 

context. quadraticCurveTo(30, 120, 170, 80); 


context. stroke( ); 


效果 如 下 图 7 -15(a) 所 示 。 


(a ) 效果 图 (b ) 辅助 图 
图 7-15 二 次 贝 塞 尔 曲线 
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图 7-15(b) 中 用 虚线 表示 出 起 点 与 控制 点 以 及 终点 与 控制 点 的 连 线 。 
2. 三 次 贝 塞 尔 曲线 
bezierCurveTo( controlxl ，controlyl , controlx2, controly2, x, y) 方法 接收 6 个 参数 ,前 四 
个 是 曲线 的 两 个 控制 点 ;后 两 个 是 曲线 的 终止 点 。 三 次 贝 塞 尔 曲线 的 弯曲 程序 受 两 个 控制 
点 影响 。 
三 次 贝 塞 尔 曲线 的 实现 如 代码 清单 7 -12 所 示 。 
代码 清单 ”7 -12 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. moveTo( 30, 30); 

context. bezierCurveTo( 30, 120, 170, 20, 170, 110); 


context. stroke( ); 


效果 如 下 图 7 -16(a) 所 示 


(a ) 效果 图 (b ) 辅助 图 


7.3.1 绘制 文本 


绘制 文本 主要 有 两 个 方法 ,分 别 是 fillText (text,x,y,maxWidth) 和 strokeText( text,x,y， 
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maxWidth) ,这 两 个 方法 都 接收 4 个 参数 ,其 中 第 一 个 参数 为 要 显示 的 文本 ,xy 代表 文本 显 
示 的 位 置 。 最 后 一 个 参数 可 选 ,表示 文 本 的 最 大 宽度 ,如 果 文本 超出 这 个 宽度 ,那么 就 会 横 
向 压缩 到 指定 宽 
fillText( ) 和 strokeText( ) 方 法 的 区 别 在 于 ,前 者 填充 文字 ,后 者 对 文字 进行 描 边 ,不 填充 
内 部 区 域 ,实现 如 代码 清单 7 -13 所 示 。 
代码 清单 ”7 -13 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. font = "30px Arial"; 

context. strokeText(" Hello World!", 20, 50); 

context. fillText( " Hello World! ", 20, 110); 


效果 如 下 图 7 -17 所 示 。 


Hello World! 


Hello Worldl 


7-17 绘制 文本 效果 图 


如 果 设 置 了 最 后 一 个 参数 ,那么 文本 宽度 可 能 会 受到 压缩 ,实现 如 代码 清单 7 - 
所 示 。 
代码 清单 ”7 -14 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. font = "30px Arial"; 

context. fillText( " Hello", 20, 40，100); 

context. fillText( " Hello World!", 20, 80, 100); 

context. fillText( " Hello World! ", 20, 120); 


效果 如 下 图 7 -18 所 示 。 
上 述 例子 中 ,文本 “Hello "宽度 不 超过 最 大 宽度 值 因此 能 够 正常 显示 ,而 第 二 行 的 文本 
“Hello World1" 总 长 度 超出 了 设置 的 最 大 宽度 ,因此 文本 横向 压 缚 至 最 大 帘 度 。 
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Hello 
Hello World! 


Hello World! 


图 7-18 最 大 宽度 


7.3.2 文本 属性 


可 以 对 文本 设置 文本 字体 ,大 小 倾斜 或 者 粗 体 的 样式 进行 修改 ,而 这 些 都 是 通过 修改 
文本 属性 来 达到 的 。 
1. 文本 字体 和 文本 大 小 
可 以 看 到 上 述 的 例子 中 已 经 出 现 过 文本 属性 修改 的 语句 。 文 本 字体 和 大 小 通过 font 
属性 修改 ,这 个 属性 用 CSS 中 格式 修改 ,其 基本 格式 是 “字体 大 小 + 字体 名 称 ”。 在 例子 中 ， 
把 字体 大 小 修改 为 30px( 像 素 ) ,字体 为 Arial ,因此 有 如 下 语句 。 
context. font = "30px Arial"; 
其 中 字体 大 小 和 字体 名 称 用 空格 阳 开 。 面 布 中 默认 字体 大 小 为 10px ,字体 为 电脑 系统 
默认 字体 。 如 果 格 式 不 合法 或 者 字体 名 称 不 存在 ,那么 属性 修改 失败 。 
文本 字体 和 文本 大 小 的 实现 如 代码 清单 7 -15 所 示 。 
代码 清单 7-15 


var canvas = document. getElementByld("myCanvas"); 

var context = canvas. getContext("2d"); 

context. font = "30px 宋体 "; 

context. fillText( " Hello World! ", 20，30); 

context. font = "30px 微软 雅 黑 "; 

context. fillText(" Hello World!", 20, 70); 

context. font = "20px"; // 缺 少 字体 名 称 , 格式 不 合法 , 修改 失败 
context. fillText( " Hello World!", 20, 110); 


效果 如 图 7 -19 所 示 。 
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Hello World! 
Hello Worldl 


Hello World! 


图 7-19 字体 属性 修改 


2. 文本 粗细 和 文本 倾斜 
font 属性 中 ,除了 字体 大 小 和 字体 名 称 外 ,还 可 以 加 入 其 他 属性 值 ,如 指定 文本 粗细 。 
文本 粗细 有 4 个 属性 值 :normal( 正常) .bold( 粗 体 ) .bolder( 加 粗 体 ) 和 lighter( 柔 细 ) 。 也 可 
以 使 用 数字 来 直接 设置 ,如 下 所 示 。 
context. font = "bold 30px Arial" ; 
context. font = "400 30px Arial"; 
也 可 以 使 文本 呈现 倾斜 的 样式 ,文本 倾斜 有 3 个 属性 值 :normal italic 和 oblique ,其 中 
后 两 个 能 够 让 字体 倾斜 ,不 过 其 中 的 区 别 有 点 微妙 ,其 中 italic 是 指 文本 的 倾斜 体 ,oblique 
指 倾 斜 的 文字 。 不 作 深究 ,一般 来 说 这 两 个 属性 的 效果 都 是 一 样 的。 设置 方法 如 下 。 
context. font = "italic 30px Arial"; 
当然 也 可 以 同时 设置 粗细 和 倾斜 ,这 两 个 属性 值 的 摆 放 位 置 任意 ,可 以 放 在 字体 大 小 
前 ,或 者 字体 名 称 后 ,不 过 不 能 放 在 字体 大 小 和 字体 名 称 之 间 ,否则 不 合法 。 
下 面 来 测试 一 下 以 上 的 属性 值 , 实 现 如 代码 清单 7- 16 所 示 。 
代码 清单 “7 -16 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. font = "30px Arial"; 

context. fillText( " Hello World! ", 20，30); 


context. font = "bold 30px Arial"; 
context. fillText( " Hello World! (bold)", 20, 70); 


context. font = "italic 30px Arial"; 
context. fillText( " Hello World! (italic)", 20, 110); 


context. font = "oblique 30px Arial"; 
context. fillText( " Hello World! ( oblique)", 20, 150); 
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context. font = "600 italic 30px Arial" ; 
context. fillText( " Hello World! (600 italic)", 20,190); 


效果 如 图 7 -20 所 示 。 


Hello World! 
Hello World!(bold) 
Hello World!(italic) 


Hello World!(oblique) 
Hello World!(600 italic) 


图 7 -20 字体 粗细 和 字体 倾斜 


3. 文本 对 齐 方式 
还 能 够 修改 文本 的 对 齐 方 式 ,其 中 包括 了 属性 textAlign 和 textBaseline。 前 者 修改 文本 
的 对 齐 方式 ;后 者 修改 文本 的 对 齐 基线 。 
textAlign 属性 有 属性 值 :start end ,left right 和 center。 下 面 通过 例子 来 呈现 它们 的 对 
齐 方式 ,实现 如 代码 清单 7 -17 所 示 。 
代码 清单 7-17 


var canvas = document. getElementByld( "myCanvas" ) ; 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. beginPath() ; 

context. moveTo(170，10) ; 

context. lineTo( 170, 230); 


context. stroke( ); 
context. font = "30px Arial"; 
context. textAlign = "start"; 


context. fillText( " Hello World!", 170, 50); 


context. textAlign = "end"; 
context. fillText( " Hello World! ", 170, 90); 


context. textAlign = "left"; 
context. fillText( " Hello World! ", 170, 130); 
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context. textAlign = "right"; 
context. fillText( " Hello World! ", 170, 170); 


context. textAlign = "center"; 
context. fillText(" Hello World! ", 170, 210); 


效果 如 图 7 -21 所 示 。 


Hello World! 
Hello World! 
Hello World! 


Hello World! 
Hello World! 


图 7-21 文本 对 齐 方式 


从 例子 中 可 以 看 到 属性 值 " start" 与 "left" 以 及 "end" 与 "right" 效果 一 样 ,不 过 实际 上 它 
们 是 有 区 别 的 "start" 和 "end" 的 效果 显示 与 文字 的 阅读 方向 相关 ,一 些 国家 是 从 右 向 左 阅 
读 , 那 么 此 时 start 对 应 着 右边 ,end 对 应 着 左边 。 而 "left" 和 "right" 始终 是 指 文本 的 左右 方 
向 ,与 阅读 方向 无 关 。 
textBaseline 属性 有 属性 值 : alphabetic ,top 、.bottom .middle .hanging 和 ideographic。 下 面 
通过 例子 来 呈现 它们 的 对 齐 方式 ,实现 如 代码 清单 7 -18 所 示 。 
代码 清单 7-18 


var canvas = document. getElementByld( "myCanvas'" ) ; 
var context = canvas. getContext("2d"); 
context. lineWidth = 2; 

context. beginPath() ; 

context. moveTo( 10, 50); 

context. lineTo( 390, 50); 

context. moveTo( 10, 120); 

context. lineTo( 390,120); 

context. moveTo( 10, 190); 

context. lineTo(390，190) ; 

context. stroke() ; 
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context. font = "30px Arial"; 

context. textBaseline = "bottom"; 

context. fillText(" Hello World!", 20, 50); 
context. textBaseline = "top"; 

context. fillText( " Hello World!", 220, 50); 
context. textBaseline = "ideographic"; 
context. fillText( " Hello World!", 20,120); 
context. textBaseline = "hanging"; 

context. fillText( "Hello World! ", 220, 120); 
context. textBaseline = "alphabetic"; 
context. fillText( " Hello World! ", 20, 190); 
context. textBaseline = "middle"; 

context. fillText( " Hello World! "，220，190) ; 


显示 效果 如 下 图 7 -22 所 示 。 


Hello World! 


Hello World! 


Hello World! 
Hello World! 


7-22 文本 对 齐 基线 


7.3.3 测量 文本 宽度 


2D 上 下 文 提 供 了 一 个 方法 来 测定 当前 文本 属性 及 文本 的 宽度 大 小 。 这 个 方法 就 是 
measureText(text ) ,该 方法 接收 一 个 参数 text ,代表 要 测量 的 文本 。 这 个 方法 返回 的 是 一 个 
对 象 ,目前 这 个 对 象 只 有 width 属性 ,在 将 来 还 会 增加 更 多 度量 属性 。 

这 个 返回 对 象 的 属性 值 width 随 着 当前 上 下 文 的 文本 属性 改变 而 改变 ,实现 如 代码 清 
单 7 -19 所 示 。 
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代码 清单 ”7 -19 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. font = "30px Arial"; 

var metrics1 = context. measureText("Hello World! "); 
console. log( metrics1. width) ; //165 


context. font = "40px 宋体 "; 
var metrics2 = context. measureText(" Hello World! "); 


console. log( metrics2. width) ; //240 


7.4 人 小结 


本 章 介绍 了 画布 canvas 的 基本 功能 ,也 是 最 常用 的 功能 。 使 用 画布 canvas 的 步 又 为 : 

1 \ 先 在 网 页 文档 中 设置 < canvas > 元 素 标签 , 预 留 一 个 位 置 给 画布 绘图 。 

2 .在 JavaScript 代码 中 获取 < canvas > 标签 的 引用 ,以 其 获取 画布 上 下 文 。 

3 .设置 线条 绘图 的 属性 ,包括 有 线 宽 和 填充 颜色 等 。 

4 在 上 下 文中 绘制 图 形 路 径 , 最 后 进行 描 线 或 者 填充 。 

面 布 中 支持 的 基本 图 形 有 :直线 、 圆 弧 矩形 和 贝 赛 尔 曲线 。 利 用 这 些 基本 图 形 可 以 绘 
制 出 不 同形 状 。 除 了 绘图 以 外 ,画布 中 还 能 够 绘制 文字 ,其 中 的 步骤 与 绘图 相同 。 


7.5 习题 


1. 任意 写 出 4 种 画布 中 的 线条 属性 。 

2. 以 下 用 于 设置 颜色 的 字符 串 中 ,错误 的 是 : 

A. "#FFO" 

B. "#FOFOFO" 

C: "reb(255.,0,0)" 

D. "blue" 

3. 线 帽 样式 lineCap 属性 ,不 能 设置 以 下 哪个 值 ? 
A. "butt" 
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B. "round" 

C. "square" 

D. "miter" 

4. 上 下 文 对 象 的 方法 closePath( ) 用 于 : 
A. 关闭 绘图 功能 

B. 绘制 线条 

C. 填 充 闭 合 路 径 


D. 闭合 路 径 
5. 语句 “ctx. rect(0,0,30,30) ;ctx.fil( ); ”等 价 于 语句  。 
6. 方 法 clearRect( ) 的 作用 是 o 


7. 如果 需 要 以 点 (30,30 ) 为 圆心 , 顺 时 针 绘 制 一 个 半径 为 8 的 圆 ,调用 的 绘图 语 
句 是 : 

8. 可 以 用 于 绘制 文字 的 是 哪 两 个 方法 ? 和 o 

9. 以 下 字符 串 中 ,能 够 用 于 设置 文本 字体 和 大 小 的 是 ( 即 font 属性 的 值 )? 

A. "30px" 

B. "30 Arial" 

C. "30px Arial" 

D. "Arial" 

10. 编写 程序 ,在 画布 上 绘制 一 个 正六 边 形 (提示 :利用 循环 语句 和 Math 对 象 提供 的 
方法 )5 

11. 编写 程序 ,在 画布 上 绘制 一 个 奥运 五 环 , 并 且 为 它们 设置 成 对 应 的 颜色 。 
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第 8 瘟 ”Canvas 高 级 功能 


本 章 开 始 讲解 canvas 中 的 高 级 功能 ,尽管 基本 功能 已 经 可 以 应 付 大 多 数 的 绘图 工 
作 , 但 是 如 果 要 添加 更 多 绘图 效果 ,就 需要 用 到 这 一 章 中 所 提 到 的 功能 。 这 一 章 中 提供 
了 更 多 的 绘图 方法 ,包括 图 像 图 形 的 绘制 .颜色 渐变 .平移 旋转 效果 添加 填充 花样 和 增 
加 阴影 效果 等 。 


8.1 绘制 图 像 


如 果 想 绘制 图 像 到 画布 中 ,可 以 使 用 画布 提供 的 drawImage( ) 方 法 , 它 可 以 让 指定 的 
图 像 显示 到 画布 上 。 

这 个 方法 有 3 种 不 同 的 参数 组 合 , 分 别 按照 给 定 的 参数 绘制 图 像 。 先 来 看 第 一 种 最 
简单 的 调用 方式 

context. drawlmage(image，dx，dy) 

第 一 个 参数 image 表示 是 图 像 对 象 , 它 可 以 是 HTMLImageElement、HTMLCanvasEle- 
ment 和 HTMLVideoElement 中 的 任 一 个 对 象 。 后 两 个 参数 指定 了 图 像 在 画布 中 的 显示 位 
置 , 即 图 像 左 上 角 在 画布 中 的 位 置 。 

下 面 来 看 一 下 怎么 绘制 图 像 ,实现 如 代码 清单 8 -1 所 示 。 

代码 清单 ”8 -1 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

var image = new Image(); 

image.src =" 鱼 . png"; 

image. onload = function () { 


context. drawlmage( image, 50, 50); 


效果 如 图 8 -1 所 示 。 
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图 8 -1 绘制 图 像 


代码 中 创建 了 一 个 image 对 象 ,并 且 使 这 个 对 象 的 sre 属性 设置 图 像 名 字 的 字符 串 ， 
因此 现在 image 就 代表 绘制 的 对 象 。 在 代码 中 并 没有 直接 使 用 drawImage( ) 方 法 绘制 图 
像 ,而 是 在 image 对 象 的 onload( ) 方 法 中 调用 。 因 为 在 加 载 完 HTML 文档 后 ,图像 需要 一 
段 时 间 加 载 到 网 页 中 ,如 果 没 有 加 载 完 图 像 就 调用 drawImage( ) ,那么 不 会 有 效果 。 而 当 
image 对 象 加 载 完毕 后 ,程序 会 自动 调用 其 中 的 onload( ) 方 法 ,所 以 利用 这 个 特性 把 绘制 
图 像 的 方法 放 在 onload( ) 函数 中 ,图 像 加 载 完 就 马上 绘制 图 像 到 面 布 上 。 

第 二 种 参数 组 合 可 接收 5 个 参数 ,如 下 所 示 。 

context. drawlmage( image, dx, dy, dw, dh) 

上 述 这 种 参数 组 合 在 最 后 多 了 dw 和 dh 参数 ,分 别 指定 要 显示 图 像 的 宽度 和 长 度 。 
如 果 图 像 的 实际 宽度 或 长 度 不 等 于 这 个 设 定 值 ,那么 会 先 缩放 图 片 至 指定 大 小 ,然后 再 
绘制 到 画布 上 。 

第 三 种 参数 组 合 可 以 接收 9 个 参数 ,如 下 所 示 。 

context. drawlmage( image, sx, sy, sw, sh, dx, dy, dw, dh) 

其 中 参数 sx 和 sy 代表 源 图 像 中 的 x 坐标 和 y 坐标 ,sw 和 sh 代表 源 图 像 的 宽度 和 高 
度 。 以 上 这 4 个 参数 指定 了 要 截取 源 图 像 内 部 的 一 部 分 来 绘制 到 画布 上 。 后 4 个 参数 跟前 
面 一 样 ,指定 图 像 在 画布 上 的 位 置 和 显示 大 小 , 源 大 小 与 指定 大 小 不 一 样 , 会 进行 缩放 处 理 。 

有 关 图 像 绘制 的 例子 的 实现 如 代码 清单 8 -2 所 示 。 

代码 清单 ”8 -2 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 
var image = new Image(); 
image. src =“" 鱼 .png"; 
image. onload = function () { 
context. drawlmage( image, 10, 10, 150, 150); 
context. drawlmage( image, 30, 30, 100, 100, 210, 10, 150, 150); 
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效果 如 图 8 -2 所 示 。 


图 8 -2 效果 演示 


8.2 像素 级 操作 


可 以 把 操作 落实 画布 中 的 每 一 个 像素 上 ,也 就 是 像素 级 的 操作 。HTMIS 画布 提供 了 
3 个 像素 级 操作 的 方法 ,分 别 是 createImageData( ) 创建 像素 对 象 , getImageData( ) 获取 夯 
布 中 的 像素 对 象 和 putImageData( ) 把 像素 对 象 放 和 人 到 画布 中 。 


3.2.1 像素 对 象 


像素 级 操作 中 都 涉及 一 个 像素 对 象 ,这 个 对 象 有 3 个 属性 值 ,分 别 是 width ,height 和 
一 个 data。 前 两 个 表示 这 个 像素 对 象 的 宽度 和 高 度 , 第 三 个 属性 是 一 个 数组 ,这 个 数组 保 
存 了 每 一 位 像素 中 的 RGB 值 和 透明 度 alpha, 因此 数组 长 度 有 width x height x4 个 ,而 表 
示 的 像素 顺序 是 从 左 到 右 ,从 上 到 下 , 按 行 存储 。 

因此 如 果 想 要 一 块 像素 变 为 透明 黑 , 只 需要 把 像素 块 中 的 所 有 像素 RGB 改 到 0 即 
可 ,如 下 所 示 。 

for (vari = 0; i < width * height * 4;i+=4){ 
imageData. data[i = 0; ”// 红 色 成 分 
imageData. data[i + 1] = 0; ”// 绿 色 成 分 
imageData. data[i + 2] = 0; ”// 蓝 色 成 分 
imageData. data[i + 3] = 255; ”// 透 明度 


.144 . 


yy 
第 8 章 Canvas 高 级 功能 ) EE% 


8.2.2 创建 像素 对 象 


要 创建 像素 对 象 可 以 使 用 createImageData( ) 方 法 ,这 个 方法 有 两 种 参数 组 合 : 
context. createlmageData( sw, sh) 

这 个 形式 接收 二 个 参数 ,代表 要 创建 的 像素 对 象 的 宽度 和 高 度 。 
context. createlmageData(imgaeData) 

这 个 形式 接收 一 个 像素 对 象 作 为 参数 ,创建 的 像素 对 象 大 小 与 指定 的 像素 对 象 大 小 相同 。 

创建 的 这 个 像素 对 象 默认 是 透明 黑 状 态 , 因 此 看 不 见 这 块 区 域 的 像素 。 所 以 可 以 通过 

对 它 的 像素 进行 操作 ,使 像素 变 到 不 透明 和 改变 颜色 ,实现 如 代码 清单 8 -3 所 示 。 
代码 清单 ”8 -3 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 
var imageData = context. createlmageData(100，100) ; 
for (vari = 0; i < 100 * 100 * 4; i +=4){ 
imageData. data[i] = 0; 
imageData. data[i + 1] = 0; 
imageData. data[i + 2] = 255; 
imageData. data[i + 3] = 255; 
} 
context. putlImageDatal( imageData, 50, 50); 


效果 图 如 8 -3 所 示 。 


图 8 -3 蓝 色 像素 块 
例子 中 首先 创建 了 一 个 100 x 100 大 小 的 像素 对 象 , 此 时 像素 的 状态 为 透明 黑 , 所 以 
利用 for 循环 语句 把 每 个 像素 的 红色 和 绿色 成 分 改 为 0, 蓝 色 成 分 改 为 255 ,并 且 透 明度 大 
小 为 255 , 即 不 透明 。 再 利用 putImageData( ) 方法 把 像素 放 和 人 画布 显示 出 来 。 
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8.2.3 取得 像素 对 象 


可 以 利用 方法 getImageData( ) 获取 画布 上 的 指定 像素 对 象 , 如 下 。 
context. getlmageData( sx, sy, sw, sh) 
这 个 方法 接收 四 个 参数 ,前 两 个 指定 要 获取 区 域 的 起 点 ,后 两 个 指定 区 域 大 小 。 方 
法 同样 返回 一 个 像素 对 象 ,可 以 对 这 个 像素 对 象 操作 以 后 再 绘制 到 面 布 中 。 
下 面 利用 getImageData( ) 方 法 取得 画布 上 的 图 像 ,并 对 像素 进行 反 色 操作 ,再 绘制 到 
画布 上 ,实现 如 代码 清单 8 -4 所 示 。 
代码 清单 ”8-4 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 

var image = new Image(); 

image. src =“" 鱼 .png"; 

image. onload = function () { 


context. drawlmage( image, 10, 10); 


var imageData = context. getlImageData(10, 10, 201, 146); 
for (vari =0; i < 201 * 146 * 4; i+=4){ 
imageData. data[i] = 255 - imageData. data[i]; 
imageData. data[i + 1] = 255 - imageData. data[i + 1]; 
imageData. data[i + 2] = 255 - imageData. data[i + 2]; 
context. putlmageData(imageData，230，10) ; 


效果 图 如 8 -4 所 示 。 


图 8 -4 利用 getImageData( ) 进行 反 色 操作 


i 
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上 述 例子 中 的 201 和 146 是 图 像 的 宽度 和 高 度 。 进 行 像素 操作 时 没有 修改 透明 度 的 
值 ,因为 没有 这 个 需要 ,维持 原来 的 就 好 。 


8.2.4 绘制 像素 对 象 


创建 或 获取 像素 对 象 进行 操作 以 后 ,可 以 把 像素 对 象 再 绘制 到 画布 上 ,这 时 候 利 用 
putImageData( ) 方 法 。 根据 传人 参数 ,有 两 种 绘制 像素 对 象 的 方法 ,第 一 种 方法 接收 3 个 
参数 组 合 ,如 下 。 

context. putlmageData(imageData，dx，dy) 

第 一 个 参数 为 绘制 的 像素 对 象 ,后 两 个 参数 代表 像素 在 画布 上 放 和 人 的 位 置 , 上 述 两 
个 例子 中 都 用 到 了 这 个 形式 。 

context. putlmageData( imageData, dx, dy, sx, sy, sw, sh) 

第 二 种 参数 组 合 接收 7 个 参数 ,前 3 个 参数 含义 相同 。 后 4 个 参数 指定 了 一 个 矩形 
区 域 ,表示 只 绘制 源 像素 对 象 中 指定 区 域内 的 像素 块 ,实现 例子 如 代码 清单 8-5 所 示 。 

代码 清单 8 -5 


var canvas = document. getElementByld(" myCanvas"); 

var context = canvas. getContext("2d"); 

var image = new Image(); 

image. src =“" 鱼 .png"; 

image. onload = function () { 
context. drawlmage( image, 10, 10); 
var imageData = context. getlImageData(10, 10, 201, 146); 
context. putlmageData( imageData, 230, 10, 50, 50, 100, 100); 


效果 如 图 8 -5 所 示 。 


图 8 -5 绘制 指定 区 域 的 像素 块 
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8.3 变换 


默认 情况 下 ,画布 的 坐标 系 原点 (0,0) 都 在 左上 角 ,x 正方 向 向 右 ,y 正方 向 向 下 。 但 
是 画布 提供 了 方法 来 变换 画布 ,产生 平移 旋转 和 缩放 的 效果 ,从 而 方便 作 图 。 实 际 上 对 
画布 应 用 的 变换 ,是 对 其 变换 矩阵 进行 操作 的 。 


8.3.1 平移 


平移 操作 就 是 把 画布 平移 指定 的 距离 ,使 用 方法 ranslate(x,，y) 进行 操作 ,如 下 。 
context. translate(x，y) 
这 个 方法 接收 两 个 参数 ,代表 画布 在 x 和 y 方向 上 平移 的 距离 , 即 画布 原点 从 (0,0) 
位 置 平移 到 了 (x,y) 位 置 , 平 移 变换 如 代码 清单 8 -6 所 示 。 
代码 清单 ”8-6 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. strokeRect(10，10，150，100) ; 

context. translate(160，30) ; 

context. strokeRect(10，10，150，100) ; 


效果 如 图 8 -6 所 示 。 


图 8 -6 平移 
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8.3.2 旋转 
旋转 操作 把 画布 以 原点 为 中 心 旋转 一 定 角度 ,角度 增 大 方向 为 顺 时 针 方 向 , 减 小 方 


向 为 逆 时 针 方向 ,如 下 。 
context. rotate( angle) 
画布 旋转 方法 接收 一 个 参数 ,为 旋转 的 角度 ,单位 是 弧度 而 不 是 角度 。 注 意 这 个 方 
法 是 把 整 张 画布 以 坐标 系 原点 为 旋转 中 心 进行 旋转 ,旋转 后 所 绘制 的 图 形 都 受到 影响 ， 
实现 例子 如 代码 清单 8 -7 所 示 。 
代码 清单 ”8 -7 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. strokeRect(50, 10, 150, 100); 

var degToRad = Math. Pl / 180; 

context. rotate(30 * degToRad); 

context. strokeRect(50, 10, 150, 100); 


证 


效果 如 图 8 -7 所 示 。 


8 -7 旋转 
可 见 旋 转 前 后 的 矩形 是 以 原点 为 旋转 中 心 , 且 超出 画布 的 部 分 没有 绘制 。 


如 果 和 希望 以 矩形 中 心 旋 转 ,或 者 其 他 图 形 围绕 某 一 个 点 旋转 ,那么 可 以 这 样 做 : 先 把 
画布 (原点 ) 平 移 到 指定 的 旋转 中 心 上 ,旋转 画布 以 后 ,再 把 画布 (原点 ) 平 移 回 坐标 系 原 
点 [0.0)5 

把 上 述 例子 中 的 矩形 围绕 自身 旋转 ,实现 例子 如 代码 清单 8 -8 所 示 。 

代码 清单 ”8 -8 


var canvas = document. getElementByld("myCanvas"); 
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var context = canvas. getContext("2d"); 
context. lineWidth = 2; 
context. strokeRect(50, 50, 150, 100); 
var degToRad = Math. Pl / 180; 
context. translate( 125, 100); 


context. rotate(45 * degToRad); 
context. translate( ~125, —100); 
context. strokeRect(50, 50, 150, 100); 


效果 如 图 8 -8 所 示 。 


8 -8 ”以 自身 中 心 旋转 


8.3.3 缩放 


缩放 操作 把 画布 向 着 原点 收缩 或 放大 ,如 下 。 
context. scale( x, y) 
画布 缩放 方法 接收 两 个 参数 ,表示 在 x 轴 方 向 (横向 ) 的 缩放 和 y 轴 方 向 (纵向 ) 的 缩 
放 ,数值 在 0 ~1 之 间 表 示 缩 小 ,大 于 1 表示 放大 。 如 果 数 值 为 负数 ,那么 表示 该 方向 进 
行 翻转 后 再 缩放 ,实现 如 代码 清单 8 -9 所 示 。 
代码 清单 ”8 -9 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. strokeRect(50, 50, 150, 100); 

context. scale(0.5, 0.5); 

context. strokeRect(50, 50, 150, 100); 


效果 如 图 8 -9 所 示 。 
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图 8-9 缩放 


从 图 8 -9 可 以 看 到 在 进行 缩小 以 后 ,矩形 进行 了 偏 移 。 原 因 在 于 缩放 把 整 张 画布 
的 坐标 值 都 进行 了 缩放 ,因此 起 点 位 置 (50 ,50 ) 进行 缩小 后 变 到 (25 ,25 ) ,所 以 矩形 的 位 


置 产生 偏 移 , 因 此 可 看 作 缩 放 操作 把 画布 向 着 原点 收缩 或 放大 。 
如 果 和 希望 以 自身 中 心 或 者 其 他 某 一 点 进行 缩放 ,同样 可 先 偏 移 原点 到 指定 点 后 再 缩 
放 , 最 后 把 原点 平移 回 原来 的 位 置 ,具体 做 法 可 参照 代码 8 -8。 


如 果 缩 放 方法 中 的 参数 为 负数 ,效果 将 是 把 画布 翻转 后 再 进行 缩放 ,实现 如 代码 清 
单 8 -10 所 示 。 
代码 清单 ”8 -10 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 
var image = new Image(); 
image. src =“" 鱼 .png'"; 
image. onload = function () { 
context. drawlmage( image, 10, 10); 
context. scale( -0.5, 0.5); 
context. drawlmage( image, —700, 100); 


效果 图 如 8 - 10 所 示 。 


图 8 -10 负数 值 缩放 
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因为 此 时 在 x 轴 方 向 进行 了 翻转 ,所 以 图 像 的 起 点 位 置 在 图 像 的 右上 角 ,并 且 现 在 x 的 正 


方向 为 左 方 。 为 此 要 把 图 像 显 示 出 来 ,需要 把 图 像 绘制 在 ( -700,100) 的 位 置 ,700 的 数值 超出 
了 画布 的 宽度 值 400, 但 是 由 于 缩小 也 把 坐标 值 缩小 ,所 以 实际 上 相当 于 350 的 位 置 。 


8.3.4 操作 矩阵 


上 述 三 种 方法 实际 上 是 通过 修改 变换 矩阵 来 达到 变换 的 效果 ,但 是 可 以 直接 对 和 矩阵 
进行 操作 ,来 达到 更 多 的 变换 效果 。 

画布 中 提供 了 两 个 方法 直接 对 矩阵 进行 操作 ,分 别 是 transform( ) 方 法 和 setTransform( ) 
方法 。 

1. transform( ) 方 法 

context. transform(a, b, c, d, tx, ty) 

这 个 方法 是 让 画布 当前 的 矩阵 乘 以 以 下 形式 的 矩阵 

| 

b d | 
从. | 

和 矩阵 中 的 字母 对 应 着 方法 中 的 参数 。 

学 ”平移 

假设 平移 前 的 坐标 位 置 为 (xl ,yl ) ,平移 后 的 坐标 位 置 为 (x,y) ,x 方向 和 y 方向 平移 
距离 分 别 为 tk 和 ty, 因 此 有 如 下 关系 。 


区 三 刘 二 标 


y=yl +ty 
因此 有 以 下 的 矩阵 公式 


1 0 tx)/xl 
0 1 tllyl 
1 0 人 人 


用 transform( ) 方 法 改写 的 代码 如 代码 清单 8 -11 所 示 。 
代码 清单 ”8 -11 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. strokeRect( 10, 10, 150, 100); 

context. transform(1, 0, 0, 1, 160, 30); 

context. strokeRect( 10, 10, 150, 100); 
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效果 图 相同 。 
光 ”旋转 
假设 旋转 前 的 角度 为 坐标 9, 距 原点 距离 为 p, 位 置 为 (x1 ,yl1) ,因此 有 关系 
xl = pcosp 
yl =psing 
旋转 角度 为 ,因此 旋转 后 的 的 角度 为 坐标 p + 9, 距 原点 距离 不 变 , 为 p。 坐 标 位 置 
为 (x,y) ,因此 有 如 下 关系 。 
x=pcos(® +0) = pcoscosb - psinpsinb = xlcosb -ylsinb 
y=psin(® +0) =psinpcosb + pcospsinb =ylcosb +xlsin0 
因此 有 以 下 的 矩阵 公式 
x cos0 —sing 11fxl 


y|=|sin cos0 1|lyl 


1 0 0 1 
用 transform( ) 方 法 改写 代码 8 -7 ,实现 如 代码 清单 8 -12 所 示 。 
代码 清单 ”8 -12 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. strokeRect(50, 10, 150,100); 

var degToRad = Math. Pl / 180; 

var cos30 = Math. cos(30 * degToRad); 

var sin30 = Math. sin(30 * degToRad); 

context. transform( cos30, sin30，-sin30，cos30, 1, 1); 
context. strokeRect(50, 10, 150, 100); 


学 ”缩放 
假设 缩放 前 的 坐标 位 置 为 (xl ,yl ) ,缩放 后 的 坐标 位 置 为 (x,y) ,x 方向 和 y 方向 缩放 
大 小 分 别 为 sx 和 sy, 因此 有 如 下 关系 。 
X=xX] Xsx 
y=yl xsy 
因此 有 以 下 的 矩阵 公式 


ET HTML 于 动 画 开 发 广 引 上 
用 transform( ) 方 法 改写 代码 8 -9 ,实现 如 代码 清单 8 -13 所 示 。 
代码 清单 ”8 -13 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 

context. lineWidth = 2; 

context. strokeRect(50, 50, 150, 100); 

context. transform(0.5, 0, 0, 0.5, 1, 1); 

context. strokeRect(50, 50, 150, 100); 


2. setTransform( ) 方 法 

context. setTransform(a, b, c, d, tx, ty) 

上 文 提 到 的 transform( ) 方 法 是 把 画布 当前 矩阵 乘 以 给 定 的 一 个 矩阵 , 而 这 个 
setTransform( ) 方 法 就 是 修改 的 画布 矩阵 ,使 画布 矩阵 为 修改 的 状态 。 

利用 transform( ) 方 法 修改 矩阵 后 ,画布 就 保持 着 被 修改 的 状态 , 即 之 后 所 绘制 的 所 
有 图 形 都 受到 变换 的 影响 ,除非 对 和 矩阵 做 逆 变 换 ,使 之 回 到 原本 的 状态 。 所 以 此 时 可 以 
使 用 setTransform( ) 方 法 直接 修改 指定 矩阵 。 


8.4 读 充 风 客 


在 “Canvas 基本 功能 "一 章 中 , 提 到 过 描 边 风格 strokeStyle 和 填充 属性 flStyle , 用 
CSS 颜色 字符 串 的 值 赋 给 这 个 属性 就 可 以 把 描 边 或 填充 颜色 修改 为 想 要 的 填充 颜色 。 但 
是 除 此 之 外 ,这 两 个 属性 还 接收 CanvasGradient 或 者 CanvasPattern 对 象 的 值 。 


8.4.1 渐变 填充 


通过 创建 CanvasGradient 对 象 并 赋值 给 strokeStyle 属性 或 fllStyle 属性 ,可 以 使 颜色 
呈现 一 种 渐变 的 效果 ,其 中 渐变 效果 分 为 两 种 :线性 渐变 和 径 向 渐变 。 这 两 个 渐变 对 象 
的 创建 方法 分 别 为 createLinearGradient( ) 和 createRadialGradient( ) ,另外 这 个 对 象 上 有 一 
个 辅助 方法 addColorStop( ) ,用 来 添加 颜色 。 

1. 线性 渐变 

创建 一 个 线性 渐变 填充 的 对 象 方法 为 

context. createLinearGradient( x0, y0, x1, y1) 

这 个 方法 接收 两 个 参数 ,分 别 表示 两 个 点 ,颜色 沿 着 这 两 个 点 构成 的 线段 的 方向 形 
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成 渐变 ,而 垂直 于 这 条 线段 的 直线 上 的 所 有 点 的 颜色 都 相同 。 

对 象 创建 以 后 ,还 必须 为 它 添加 线性 渐变 的 颜色 和 对 应 的 位 置 ,对 象 中 有 方法 

addColorStop( ) ,如 下 所 示 。 
gradient. addColorStop( offset, color) 

该 方法 接收 两 个 参数 ,第 一 个 参数 offset 代表 渐变 颜色 点 的 位 置 ,数值 在 0 一 1 之 间 ， 
表示 线段 上 的 相对 位 置 点 。 第 二 个 参数 color 代表 要 添加 的 渐变 颜色 ,格式 为 字符 串 ， 
即 "#XXXXXX" 的 形式 。 

这 个 渐变 对 象 是 由 一 个 渐变 颜色 点 开始 渐变 到 另 一 个 渐变 颜色 点 ,两 个 点 之 间 的 颜 
色 均 匀 渐 变 ,线性 渐变 的 实现 如 代码 清单 8 -14 所 示 。 

代码 清单 ”8 -14 


var canvas = document. getElementByld(" myCanvas"); 

var context = canvas. getContext("2d"); 

var gradient = context. createLinearGradient(50, 0, 350, 0); 
gradient. addColorStop(0,"#FF0000"); 

gradient. addColorStop(0.5, "#00FFO0"); 

gradient. addColorStop( 1, " #0000FF"); 

context. fillStyle = gradient; 

context. fillRect( 10, 10, 380, 180); 


效果 如 图 8 -11 所 示 。 


8 -11 线性 渐变 填充 


线性 渐变 填充 的 起 点 是 (50,0) ,终点 是 (350,0) , 纵 坐标 相同 ,因此 只 是 横向 的 渐变 。 
可 见 线性 填充 的 横 坐 标 起 点 是 50 ,但 是 绘制 的 矩形 横 坐 标 起 点 是 10 ,所 以 10 ~ 50 这 一 
段 内 的 填充 颜色 是 纯 红色 , 同 理 350 ~ 380 这 一 段 填充 的 是 纯 蓝 色 , 即 超出 线段 范围 的 填 
充 颜 色 是 单一 的 起 点 颜色 或 终点 颜色 。 

在 线性 渐变 中 间 的 颜色 为 绿色 , 即 由 红色 渐变 成 绿色 ,再 由 绿色 渐变 成 蓝 色 , 这 两 个 
过 程 中 的 颜色 成 分 都 是 线性 改变 。 


“ods 
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2. 径 向 渐变 
所 谓 的 径 向 渐变 ,其 原理 是 设置 一 个 起 始 圆 形 和 终止 圆 形 , 而 色彩 则 在 两 个 圆 形 间 
成 的 圆柱 面 上 渐变 。 设 置 方 法 如 下 。 
context. createRadialGradient( x0, y0, r0, x1, y1, r1) 
这 个 方法 接收 6 个 参数 ,前 3 个 参数 代表 第 一 个 圆 的 圆心 位 置 和 半径 ;后 3 个 参数 代 
表 第 二 个 圆 的 圆心 位 置 和 半径 。 
对 象 创建 以 后 ,同样 需要 调用 addColorStop ( ) 为 对 象 添加 上 渐变 颜色 点 和 对 应 的 颜 
色 值 , 径 向 渐变 的 实现 如 代码 清单 8 -15 所 示 。 
代码 清单 ”8 -15 


var canvas = document. getElementByld( " myCanvas " ) ; 

var context = canvas. getContext("2d"); 

var gradient = context. createRadialGradient(200, 100, 10, 200，100,200); 
gradient. addColorStop(0,"#FF0000"); 

gradient. addColorStop(0.5, "#00FFOO"); 

gradient. addColorStop( 1, " #0000FF"); 

context. fillStyle = gradient; 

context. fillRect( 10, 10, 380, 180); 


效果 图 如 图 8 -12 所 示 。 


8 -12 径 向 渐变 填充 


设置 的 这 个 径 向 渐变 填充 中 的 两 个 圆 同心 ,因此 填充 效果 是 由 中 间 径 向 向 外 渐变 。 
第 一 个 圆 ( 即 中 心 的 圆 形 ) 的 半径 为 10 ,其 中 这 个 圆 的 内 部 填充 颜色 为 纯 红色 ,如 果 和 希望 
从 一 点 开始 往外 渐变 ,可 以 把 第 一 个 圆 形 的 半径 设置 为 0。 同 理 ,第 二 个 圆 ( 即 最 外 层 的 
圆 形 ) 半 径 为 200 ,那么 距离 超出 200 的 外 围 部 分 ,颜色 为 纯 蓝 色 。 


8.4.2 图 案 填 充 


除了 用 颜色 填充 外 ,还 能 用 图 像 去 填充 图 形 , 这 时 候 就 要 利用 到 createPattern( ) 方 
法 ,如 下 。 
Top 
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context. createPattern( image, repetition) 


这 个 方法 接收 两 个 参数 ,第 一 个 参数 image 代表 用 于 填充 的 图 像 ; 第 二 个 参数 repeti- 
tion 代表 填充 的 方式 ,有 值 " repeat" (重复 平 铺 ) repeat - x"( 仅 水 平 重复 ) "repeat -y" 


( 仅 纵向 重复 ) 和 "no -repeat" (不 重复 ) 。 
需要 注意 的 是 ,填充 的 图 像 是 从 (0,0) 开 始 的 ,与 你 在 哪个 位 置 开 始 绘制 图 形 无 关 。 
填充 图 像 的 实现 如 代码 清单 8 - 16 所 示 。 
代码 清单 ”8 -16 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 
var image = new Image(); 
image. src =" 鱼 .png"; 
image. onload = function () { 
var pattern = context. createPattern( image, "repeat”); 
context. fillStyle = pattern; 
context. filRect( 10, 10, 380, 180); 


效果 如 图 8 -13 所 示 。 


图 8 -13 图 案 填充 


最 后 要 提 一 点 的 是 ,上 述 的 填充 对 象 ,不 仅仅 可 作用 于 fillstyle 属性 ,它们 也 可 以 用 
于 strokeStyle 属性 ,各 位 读者 可 以 亲自 去 尝试 一 下 ,不 过 要 想 效 果 明 显 的 话 ,可 以 增 大 线 


宽 (lineWidth 属性 ) 。 
8.5 阴影 效果 


画布 提供 了 几 个 全 局 属性 值 , 自动 为 绘制 的 图 形 或 图 像 添加 上 阴影 效果 ,可 以 看 到 
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这 几 个 属性 : 
学 shadowColor: 用 CSS 颜色 格式 表示 的 阴影 颜色 ,默认 为 黑色 。 
学 shadowOffsetX :阴影 在 X 轴 方 向 的 偏 移 量 ,默认 是 0。 


党 ”shadowOffsetY :阴影 在 Y 轴 方 向 的 偏 移 量 ,默认 是 0。 

学。 shadowBlur: 阴 影 的 模糊 程度 ,数值 越 大 , 这 模糊 程度 越 厉 害 ,默认 是 0, 即 不 
模糊 。 

下 面 尝试 使 用 阴影 绘制 图 像 和 图 形 ,实现 如 代码 清单 8 -17 所 示 。 


代码 清单 ”8 -17 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 
var image = new Image(); 
image. src =“" 鱼 .png"; 
image. onload = function () { 
context. shadowColor = "red"; 
context. shadowOffsetX = 5; 
context. shadowOffsetY = 10; 


context. shadowBlur = 10; 


context. fillStyle = "blue"; 
context. fillRect( 10, 10,180,，100); 


context. drawlmage( image, 200, 10) 


效果 图 如 图 8 -14 所 示 。 


图 8 -14 阴影 效果 
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一 般 情况 下 , 当 两 幅 图 像 有 重生 部 分 的 时 候 , 后 绘制 的 图 像 会 覆盖 先 绘制 的 图 像 。 
但 是 画布 提供 了 这 种 情况 时 的 处 理 方式 ,由 通过 属性 globalCompositeOperation 去 改变 它 。 
下 面 列 出 各 属性 值 下 的 合成 方式 ,下 面 的 source 指 的 是 将 要 绘制 的 图 像 ,destination 指 的 
是 已 经 绘制 在 画布 上 的 图 像 。 

党 source-over: 新 图 将 覆盖 在 原 有 内 容 上 方 , 这 是 默认 的 设置 。 

学 destination-over: 新 图 将 在 原 有 内 容 的 下 方 绘制 。 

洛 ”source-atop: 新 图 中 只 有 在 原 有 内 容重 释 的 地 方才 被 绘制 ,并 覆盖 在 原 有 内 容 
业 广 。 

学。 destination-atop : 原 有 内 容 中 只 有 与 新 内 容重 释 的 地 方才 被 留 下 ,新 图 绘制 在 原 
有 内 容 下 方 , 即 原 有 内 容留 下 的 部 分 覆盖 在 新 图 上 。 

党 ”source-in:; 新 图 仅 出 现在 与 原 有 内 容重 释 的 部 分 ,其 他 部 分 (包括 原 有 内 容 和 新 
图 其 余部 分 ) 都 变 为 透明 。 

党 ”destination-in: 原 有 内 容 仅 保留 与 新 内 容重 释 的 部 分 ,其 他 部 分 (包括 原 有 内 容 
其 余部 分 和 新 图 ) 都 变 为 透明 。 

洛 ”source-out; 只 有 新 图 中 与 原 有 内 容 不 重生 的 部 分 被 绘制 , 原 有 内 容 和 重 芭 部 分 
都 不 保留 。 

洛 destination-out: 只 有 原 有 内 容 中 与 新 图 不 重 倒 的 部 分 被 保留 ,新 图 和 重 县 部 分 都 
不 保留 。 


他 


lighter: 新 图 和 原 有 内 容重 全 的 部 分 将 作 加 色 处 理 , 即 两 部 分 颜色 值 相 加 。 
党 ”darker: 新 图 和 原 有 内 容重 释 的 部 分 将 作 减 色 处 理 。 
党 ”copy: 只 有 新 图 被 绘制 ,其 余部 分 都 不 保留 。 
学 xor: 新 图 和 原 有 内 容重 三 的 部 分 变 成 透明 。 
绘图 前 只 需 把 上 述 属性 值 赋值 给 属性 globalCompositeOperation 即 可 ,如 下 所 示 。 
context. globalCompositeOperation = "destination ~ over" 
列 出 上 述 所 有 属性 值 (12 种 合成 情况 ) 的 设置 所 显示 的 效果 ,如 图 8 -15 所 示 。 
这 里 再 介绍 一 个 属性 globalAlpha, 这 个 属性 值 用 来 指定 绘图 的 透明 度 , 即 设置 这 个 
属性 值 以 后 , 接 下 来 绘制 的 所 有 图 形 和 图 形 都 带 有 这 个 设置 的 透明 度 。 
这 个 属性 的 属性 值 范围 是 0 ~ 1,0 表示 完全 透明 ,1 表示 保持 原来 的 透明 度 ,之 间 的 
数值 表示 图 形 的 相对 透明 值 。 
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8 -15 合成 效果 图 


8.7 田 了 功 


画布 提供 的 剪 切 方 法 clip( ) 能 够 只 把 图 形 绘制 在 指定 区 域内 ,而 区 域外 的 部 分 则 不 
绘制 。 

clip( ) 方 法 会 把 当前 已 确定 的 路 径 包 围 的 区 域 作 为 剪 切 区 域 , 调 用 后 只 有 剪 切 区 域 
内 的 图 形 才 会 被 绘制 出 来 。 如 果 和 希望 恢复 原状 ,只 需 把 剪 切 区 域 设置 为 画布 大 小 的 矩形 
即 可 ,如 下 所 示 。 

context. clip() 

画布 剪 切 的 实现 如 代码 清单 8 -18 所 示 。 

代码 清单 ”8 -18 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 


context. beginPath( ) ; 
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context. arc( 100, 100, 50, 0, Math. P| * 2, false); 
context. clip( ); // 设置 圆 为 剪 切 路 径 
context. lineWidth = 2; 
context. beginPath( ) ; 
for(vari=1;i<10;i++){ 

context. moveTo(i * 20, 0) ; 

context. lineTo(i * 20, 200) 
} 
for (varj = 1; j < 10; j+ +){ 

context. moveTo(0, j * 20); 

context. lineTo(200, j * 20) 
} 


context. stroke( ); 


剪 切 前 后 的 效果 如 图 8 -16 所 示 。 
[TTTTTITITITT 
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(a ) 剪 切 前 (hb ) 剪 切 后 


图 8 -16 剪 切 效果 图 


上 述 例子 中 ,第 二 段 代 码 利用 for 循环 语句 在 x 和 y 方向 上 绘制 了 数 条 线段 ,形成 一 
个 方 格 的 效果 ,如 图 8 -16(a) 所 示 。 第 一 段 代 码 中 ,绘制 了 一 个 圆 形 的 路 径 后 调用 clip 
() 方 法 剪 切 一 个 圆 形 区 域 ,因此 只 有 圆 形 区 域 中 的 图 形 才 被 绘制 , 剪 切 后 效果 如 


图 8 -16(b) 所 示 。 


8.8 状态 方法 


读者 或 许 已 经 发 现 到 一 个 问题 ,讲述 过 的 属性 值 ,变换 矩阵 和 剪 切 区 域 ,在 修改 以 后 


都 会 保持 着 修改 后 的 状态 ,如 果 要 回 到 修改 前 的 状态 ,那么 需要 重新 设置 


回 原来 的 值 。 


这 个 方法 看 似 可 行 ,但 是 如 果 修 改 的 属性 值 太 多 , 漏 掉 修 改 其 中 一 个 或 者 修改 值 错误 ,都 
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将 会 带 来 不 正确 的 结果 。 
因此 画布 提供 了 一 对 方法 :save( ) 方 法 和 restore( ) 方 法 。save( ) 方 法 可 以 让 在 修改 
属性 之 前 保存 下 当前 的 属性 值 , 在 修改 结束 后 想 要 回 到 原来 的 状态 时 ,只 需要 调用 restore 
() 方 法 即 可 回 到 上 次 调用 save( ) 时 的 状态 。 

它们 的 作用 机 制 是 :save( ) 把 当前 绘图 状态 全 都 压 人 到 一 个 堆栈 之 中 ,restore( ) 则 把 
堆栈 中 的 状态 弹出 来 回 到 上 一 个 保存 的 状态 中 。 所 以 可 以 多 次 调用 save( ) 压 人 状态 ,再 


需要 注意 的 是 路 径 不 包含 在 绘图 状态 中 ,需要 清除 路 径 的 方法 是 调用 beginPath ( ) 
方法 。 
状态 方法 的 实现 如 代码 清单 8 - 19 所 示 。 
代码 清单 ”8 -19 


var canvas = document. getElementByld( " myCanvas"); 
var context = canvas. getContext("2d"); 
context. save( ); 

context. shadowColor = "red"; 

context. shadowOffsetX = 5; 

context. shadowOffsetY = 10; 

context. shadowBlur = 10; 

context. fillStyle = "blue"; 

context. fillRect( 10, 10, 180, 100); 
context. restore( ); 

context. fillRect(210，10，180，100); 


效果 如 图 8 -17 所 示 。 


图 8 -17 绘图 状态 
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8.9 小结 


本 章 的 介绍 内 容 包括 

绘制 图 像 的 方法 以 及 图 像 像素 级 的 操作 方法 。 

利用 变换 矩阵 对 图 形 进行 平移 .旋转 和 缩放 操作 。 

添加 新 的 填充 风格 ,包括 有 渐变 填充 和 图 案 填 充 。 

阴影 效果 、 合 成 方式 和 剪 切 操作 ,以 及 画布 状态 的 调整 控制 。 


党 


8.10 习题 


. 画布 中 提供 的 直接 变换 画布 的 有 哪 3 种 方法 ? 和 


. 画布 中 提供 的 操作 画布 矩形 的 有 哪 两 个 方法 ? 和 o 
. 画布 中 提供 的 3 个 填充 对 象 有 : 和 
.画布 中 提供 的 用 于 控制 阴影 效果 的 有 哪 4 个 属性 ? 
和 o 

5. 以 下 各 项 中 ,不 属于 画布 状态 的 是 ( 即 不 受 save( ) 和 restore( ) 作 用 的 ) 
A. 绘图 路 径 

B. 线条 属性 

C. 字体 大 小 

D. 阴影 效果 

6. 利用 画布 渐变 填充 方法 ,在 画布 中 绘制 渐变 的 文字 。 
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CVIDraw]JS 是 中 山大 学 自主 研发 的 一 套 游戏 引擎 ,游戏 引擎 即 是 把 一 些 底层 的 重复 
性 工作 编写 成 一 个 框架 ,用 户 只 需要 调用 引擎 给 出 的 API 接口 便 可 以 轻松 开发 游戏 ,把 
注意 力 从 代码 编写 转移 到 游戏 的 逻辑 设计 上 。 

由 于 涉及 内 容 比 较 多 ,在 这 里 只 介绍 其 中 的 绘图 部 分 ,引擎 将 画布 的 内 容 封 装 到 一 
个 对 象 中 ,只 要 按照 指定 参数 调用 API 函数 即 可 以 方便 地 绘制 出 想 要 的 图 形 。 


9.1 图 形 对 象 CVIGraph 


把 所 有 绘图 函数 都 封装 在 一 个 图 形 对 象 CVIGraph 当中 ,可 以 把 这 个 对 象 看 作 一 个 
绘图 工具 ,只 要 向 它 提供 一 个 画布 上 下 文 , 它 在 内 部 就 负责 上 色 、 描 边 和 填充 等 。 下 面 先 
看 一 个 例子 ,把 这 个 引擎 的 绘图 部 分 导入 到 HTML 当中 ,实现 如 代码 清单 9 -1 所 示 。 

代码 清单 9 -1 


<!DOCTYPE HTML > 
<HTML > 
<head > 
<title > 图形 对 象 CVIGraph < /title > 
<meta charset ="utf -8" > 
</head> 
<body > 
<canvas id ="myCanvas" width ="400" height ="250" style = "border: solid" > 
你 的 浏览 器 不 支持 canvas 画布 元 素 , 请 更 新 浏览 器 获得 演示 效果 . 
</canvas > 
< Script type =" text/javascript" src ="Color.js" > </script > 
< script type =" text/javascript" src ="geometry/Bezier. js" > </script > 
< script type = " text/javascript" src =" geometry/Geometry.js" > </script > 


< script type = " text/javascript" src ="geometry/Point. js" > </script > 
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< Script type = " text/javascript" src ="geometry/Rectangle. js" > </script > 

< Script type = " text/javascript” src ="geometry/Size.js" > </script > 

< Script type = " text/javascript” src ="shape/CVIShapeBase.js" > </script > 
< Script type = " text/javascript" src ="shape/CVIGraph.js" > </script > 


< Script type = " text/javascript" > 
var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 
var g = new CVIGraph() ; 
g.rect( cvi. rect(50, 50, 300, 150)). setLineWidth(2) ; 
g. lineTo( [cvi. p(200, 50), cvi. p(350, 125), cvi. p(200, 200), cvi. p(50, 125)]). setLine- 

Width(3) . setClose(true) ; 

g. draw( context) ; 

</script > 

</body> 

</HTML > 


效果 如 图 9 -1 所 示 。 


9-1 图 形 对 象 CVIGraph 


9.1.1 散 入 引擎 脚本 


要 调用 绘图 API 函数 ,必须 先 嵌 入 脚本 代码 ,做 法 是 利用 < script > 元 素 把 外 部 脚本 
代码 嵌入 到 当前 HTML 文档 中 ,详细 的 做 法 可 以 参考 “基本 概念 "这 一 章 。 

要 艇 入 的 绘图 脚本 代码 有 3 个 部 分 ,分 别 是 geometry shape 和 color。 其 中 geometry 
部 分 中 的 脚本 文件 定义 了 一 套 几 何 对 象 ,包括 矩形 和 点 的 定义 。shape 部 分 包含 了 封装 
好 绘图 对 象 ,里 面 提供 了 各 种 绘图 API。color 部 分 则 定义 了 颜色 对 象 。 

可 以 看 到 例子 中 用 了 数 个 < script > 元 素 把 这 3 个 部 分 中 的 脚本 文件 嵌入 文档 中 , 需 
要 注意 的 地 方 是 嵌入 的 顺序 要 保持 上 述 的 顺序 ,因为 后 续 的 脚本 文件 中 使 用 到 了 前 面 定 
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义 的 对 象 ,而 文档 默认 是 按 顺 序 解析 脚本 ,因此 脚本 嵌入 顺序 错乱 的 话 会 导致 脚本 解析 
错误 。 


9.1.2 创建 图 形 对 象 的 实例 


在 调用 图 形 对 象 中 提供 的 API 函数 前 ,首先 要 创建 一 个 图 形 对 象 的 实例 ,相信 读者 
都 已 经 熟悉 该 方法 了 ,就 是 利用 new 操作 符 创 建 对 象 。 

var gra = new CVIGraph(); 

创建 对 象 后 ,就 可 以 利用 对 象 中 的 方法 进行 绘图 ,可 以 看 到 例子 中 有 rect( ) 方 法 和 
lineTo( ) 方 法 ,分 别 绘制 矩形 和 直线 。 在 调用 方法 后 紧 接 着 调用 了 setLineWidth( ) 方 法 和 
setClose( ) 方 法 ,以 上 这 两 个 方法 都 是 修改 前 一 个 图 形 的 属性 ,另外 还 有 其 他 修改 绘图 属 
性 的 方法 ,这 些 属性 都 是 在 画布 中 见 到 过 的 。 

要 进行 绘制 ,还 必须 为 这 个 绘图 对 象 传人 画布 上 下 文 , 这 样 绘图 对 象 才 知 道 要 绘制 
到 什么 地 方 , 即 调用 方法 draw( ) 并 传人 画布 上 下 文 。 


9.1.3 几何 对 象 和 颜色 对 象 


为 了 统一 绘图 对 象 内 部 的 操作 ,引擎 另外 定义 了 一 些 几何 对 象 和 颜色 对 象 , 下 面 来 
看 一 下 都 有 什么 类 型 。 

在 绘图 时 不 再 使 用 分 开 的 两 个 参数 x 和 y 来 代表 绘图 位 置 , 而 是 选择 合并 到 一 个 点 
对 象 中 。 

点 对 象 中 只 有 两 个 属性 :x 和 y, 即 表示 点 的 横 坐 标 和 纵 坐 标 ,可 以 用 函数 evi. p(x， 
y) 快 速 创建 点 对 象 。 

2. 矩形 

同样 地 ,定义 了 一 个 矩形 对 象 一 共有 4 个 属性 ,分 别 是 xy .width 和 height,x 和 y 代 
表 和 矩形 的 起 始 位 置 , 即 矩 形 左上 角 的 点 位 置 ,width 和 height 分 别 表示 矩形 的 宽度 和 长 度 。 

可 以 用 限 数 evi. rect(x, y, width， height) 快速 创建 矩形 对 象 。 

3. 颜色 

颜色 对 象 有 Color3B .Color3F .Color4B 和 Color4F, 后 级 的 B 和 下 分 别 表示 Byte 和 
Float , 即 颜色 值 范围 是 0 一 255 和 0 一 1。 红 色 可 用 函数 evi. c3b(255, 0, 0) .evi. c3f( 1 ， 
0, 0) vevi. c4b(255, 0, 0, 255 ) 或 evi. c4f(1, 0, 0, 1) 表 示 ,其 他 颜色 如 此 类 推 。 

如 果 后 级 是 3 的 颜色 对 象 ,那么 属性 包括 有 属性 .g 属性 和 b 属性 ,表示 颜色 红 、 
绿 、 蓝 的 成 分 。 如 果 后 级 是 4 的 颜色 对 象 ,那么 除了 rgb 属性 ,还 有 属性 a, 即 alpha ,表示 
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透明 度 。 有 了 颜色 对 象 可 以 不 再 使 用 CSS 风格 的 字符 串 表示 。 
要 创建 这 4 个 对 象 ,可 以 使 用 函数 cvi. c3b(r, g, b)、 evi.c4b(r, g, b, a) cvi. c3f 
(r, g, b) 和 evi. cA4f(r, g, b, a)。 


9.2 绘图 属性 


同样 可 以 指定 绘制 的 图 形 属性 ,利用 引擎 中 的 绘图 功能 时 ,可 以 选择 在 调用 绘图 也 
数 后 修改 这 个 图 形 的 属性 ,不 过 这 种 情况 下 只 能 修改 该 图 形 的 属性 ,其 他 已 绘制 或 者 将 
要 绘制 的 图 形 不 受 影 响 。 也 可 以 选择 先 设 定 一 个 全 局 的 绘图 属性 ,设置 以 后 所 有 绘制 的 
图 形 都 按照 这 个 属性 来 绘制 ,除非 改变 全 局 属性 或 者 修改 当前 图 形 的 属性 。 


9.2.1 线条 属性 


“Canvas 基本 功能 "一 章 中 提 到 过 的 线条 属性 ,这 里 都 包含 在 内 。 
人 党” 线 颜 色 lineColor: 利 用 方法 setLineColor( color) ,参数 color 为 上 述 提 到 过 的 颜色 
对 象 ,默认 值 是 黑色 , 即 evi. c3b(0, 0, 0) 。 
线 宽度 lineWidth:setLineWidth( width) ,参数 width 是 线 宽大 小 ,默认 值 是 1 。 
线 帽 样式 lineCap :setLineCap(type) ,type 参数 是 "butt" ,"round" ," square" 之 一 。 
线 连接 处 样式 lineJoin:setLineJoin(type) ,type 参数 是 "miter" ,"round" ,"bevel" 。 
党。 斜率 限制 miterLimit:setMiterLimit( value ) ,value 参数 是 限制 值 。 
线 型 样式 的 属性 不 列 出 ,原因 是 这 个 属性 对 浏览 器 支持 不 好 。 
除了 上 述 的 方法 ,还 可 以 通过 一 种 方法 一 次 性 把 上 述 5 个 属性 修改 : 
lineStyle( lineColor, lineWidth, [lineCap], [lineJoin], [miterLimit] ) 
其 中 参数 分 别 为 线 颜色 线 宽 线 帽 线 连接 样式 和 斜率 限制 ,后 3 个 参数 可 以 忽略 , 取 值 
为 默认 值 。 
另外 还 有 设置 线段 闭合 的 属性 : 
setClose( close) 
参数 接收 一 个 布尔 值 , 代 表 线 段 是 否 闭合 。 
上 面 的 这 些 方法 都 是 接 在 绘图 方法 之 后 调用 的 ,线条 属性 的 实现 如 代码 清单 9 -2 
所 示 。 
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代码 清单 ”9 -2 


var canvas = document. getElementByld("myCanvas"); 

var context = canvas. getContext("2d"); 

var g = new CVIGraph() ; 

g. rect( cvi. rect(50, 50, 150, 100)). lineStyle( cvi. c3b(255, 122, 0), 3, "round"); 

g. lineTo([cvi. p(250, 50), cvi. p(350, 125), cvi. p(200, 200)]). setLineWidth(2). setClose 


(true) 


g. draw( context) ; 


效果 如 图 9 -2 所 示 。 


| 


9 -2 线条 属性 
上 述 例 子 中 ,可 以 在 绘制 方法 后 多 次 调用 不 同 的 线条 属性 来 修改 图 形 的 线条 属性 。 


9.2.2 填充 属性 


同样 填充 属性 也 包括 了 提 到 过 的 填充 属性 。 

学 ”不 填充 :调用 notFill( ) 方 法 ,此 时 不 填充 图 形 , 为 默认 选项 。 

学 ” 单 色 填充 :调用 filColor( color) ,使 用 单 色 填充 ,参数 color 为 颜色 对 象 。 

党 ”线性 渐变 填充 :linearGradientFill( startP ，endP ，ratios ，colors ) ,为 线性 渐变 填充 ， 


参数 startP 和 endP 为 点 对 象 ,表示 渐变 线段 的 起 点 和 终点 ,第 三 个 参数 ratios 和 第 四 个 参 
数 colors 有 两 种 赋值 方式 , 即 这 里 的 设置 方法 模拟 重 载 了 第 三 个 和 第 四 个 参数 。 


第 一 种 方式 ,渐变 中 只 需要 设置 头 尾 两 种 颜色 ,上 且 均 匀 变 化 时 ,可 以 使 用 这 种 赋值 方 


式 ， 即 ratios 赋值 起 始 色彩 ,colors 赋予 终止 色彩 。 那 么 填充 就 会 从 起 始 位 置 的 ratios 代表 
的 颜色 渐变 到 终止 位 置 的 colors 代表 的 颜色 ,实现 如 代码 清单 9 -3 所 示 。 


代码 清单 ”9 -3 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 
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var g = new CVIGraph(); 

g. rect( cvi. rect(20, 20, 360, 210)). linearGradientFill( cvi. p(50, 0), cvi. p(350, 0), cvi. c3b 
(255, 0, 0), cvi.c3b(0, 255, 255)); 

g. draw( context) ; 


效果 如 图 9 -3 所 示 。 


9-3 两 种 颜色 的 渐变 填充 


第 二 种 方式 ,提供 了 更 大 的 灵活 性 ,可 在 渐变 过 程 中 使 用 多 种 颜色 渐变 ,而 且 渐 变速 度 自 
由 设置 ,这 时 候 ratios 和 colors 都 是 数组 形式 。ratios 数组 中 的 数值 表示 直线 方向 上 给 定 偏 移 
位 置 ,而 colors 中 对 应 下 标 上 的 颜色 表示 该 位 置 的 颜色 ,实现 如 代码 清单 9 -4 所 示 。 
代码 清单 ”9 -4 


var canvas = document. getElementByld("myCanvas"); 

var context = canvas. getContext("2d"); 

var g = new CVIGraph(); 

g. rect( cvi. rect(20, 20, 360, 210)). linearGradientFill( cvi. p( 50, 0), cvi. p(350, 0), [0, 0.4, 
1], [cvi.c3b(255, 0, 0), cvi. c3b(0, 255, 0), cvi. c3b(0, 0, 255)]); 

g. draw( context) ; 


效果 如 图 9 -4 所 示 。 


9 -4 多 种 颜色 的 渐变 填充 
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客 


径 向 渐变 填充 :radialGradientFill( startP ,10 ，endP，rl ,ratios ，colors ) ,参数 startP 


和 endP 分 别 表示 起 始 贺 和 终止 加 的 圆心 位 置 ,x0 和 rl 分 别 表示 起 始 圆 和 终止 圆 的 半径 ， 
参数 ratios 和 参数 colors 有 两 种 赋值 方式 ,设置 方法 如 上 述 线性 渐变 描述 。 


客 


图 案 填充 :patternFill (image ，repetition ) ,参数 image 为 image 对 象 , repetition 为 


平 铺 方式 ,同样 有 " repeat" \" repeat ~x" \"repeat ~y" \" no — repeat" 。 
调用 方法 与 线条 属性 一 致 ,在 绘制 图 形 之 后 跟随 其 后 调用 。 要 注意 的 一 点 是 :图 形 
默认 是 不 填充 的 ,并 且 线 宽 为 1 描 边 。 如 果 和 希望 不 描 边 ,把 线 宽 属性 设置 为 0 即 可 。 


9.2.3 全 局 属性 


上 述 的 方法 都 是 紧 接 在 绘图 后 调用 的 ,所 以 修改 的 属性 只 针对 于 之 前 所 绘制 的 图 
形 。 不 过 图 形 对 象 还 提供 全 局 修改 属性 的 方法 ,可 以 修改 整体 的 绘图 属性 , 即 修改 后 接 
下 来 所 有 绘制 的 图 形 都 有 这 种 属性 ,方法 如 下 。 


尝 
* 
* 
* 
* 
他 


党 


线条 属性 :graph. gLineStyle( lineColor, lineWidth, lineCap, ，lineJoin ，miterLimit ) ; 
闭合 选项 :graph. gSetClose(bool) ; 

不 填充 :graph. gNotFill( ) ; 

单 色 填充 :graph. gFillColor( color) ; 

线性 渐变 填充 :graph. gLinearGradientFill( startP ，endP，ratios ，colors ) ; 

径 向 渐变 填充 :graph. gRadialGradientFill( startP, 0, endP, rl, ratios, ，colors ) ; 
图 案 填充 ;graph. gPatternFill( image, repetition ) ; 


以 上 所 有 方法 的 参数 含义 都 与 修改 单个 属性 的 方法 一 致 ,为 了 分 清 两 种 不 同 的 方 
法 ,全 局 方法 都 在 方法 前 加 了 一 个 字母 “g” ,代表 的 是 全 局 的 属性 方法 。 注 意 这 个 时 候 全 
局 属性 方法 并 不 是 作用 于 绘图 方法 后 ,而 是 作用 于 图 形 对 象 的 实例 graph, 实 现 如 代码 清 
单 9-5 所 示 。 


代码 清单 ”9-5 


var canvas = document. getElementByld(" myCanvas" ) ; 


var context = canvas. getContext("2d"); 


var g = new CVIGraph() ; 

g. gLineStyle( cvi. c3b(255, 122, 0), 5); 

g. gFillColor( cvi. c3b(0, 255, 255)); 

g. rect( cvi. rect(30, 30, 140, 190)); 

g. lineTo([ cvi. p(230, 30), cvi. p(370, 100), cvi. p(270, 200)]). setClose(true) ; 
g. draw( context) ; 
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效果 如 图 9 -5 所 示 。 


图 9 -5 全 局 属性 


如 果 全 局 属性 方法 和 修改 单个 属性 的 方法 同时 使 用 ,那么 修改 单个 属性 的 方法 会 覆 
盖 掉 全 局 属性 方法 。 所 以 可 以 设置 全 局 属性 后 ,再 个 别 修改 其 中 图 形 的 属性 。 


9.3 绘图 方法 


引擎 绘图 部 分 不 仅 封装 了 画布 上 的 绘图 函数 ,还 包括 了 一 些 额 外 的 图 形 来 方便 绘 
图 ,其 中 有 圆 角 矩形 . 正 多 边 形 线段 、 贝 塞 尔 曲 线 和 样 条 曲线 等 。 

学 ”和 矩形 : 

graph. rect( rect) 

参数 rect 为 矩形 对 象 ,表示 要 绘制 的 矩形 位 置 和 宽 高 度 。 上 述 例子 中 已 经 看 到 过 它 
的 使 用 方法 ,只 要 利用 函数 cvi. rect(x,，y，width，height) 即 可 快速 创建 矩 形 对 象 。 

学 ” 圆 角 矩形 : 

graph. roundRect( rect, topLeft, topRight, bottomLeft, bottomRight) 

参数 rect 为 矩形 对 象 ,第 二 个 参数 topLeft 为 圆 角 和 矩形 左上 角 圆 弧 的 半径 大 小 ,这 个 
参数 不 能 忽略 。 第 三 个 之 后 的 参数 分 别 表示 右上 角 、 左 下 角 和 右 下 角 的 圆 弧 大 小 ,这 三 
个 参数 可 以 忽略 ,默认 采用 topLeft 的 参数 值 。 

要 注意 一 点 的 是 ,上 下 圆 弧 的 半径 和 不 能 大 于 矩形 的 高 度 , 或 者 左右 圆 弧 的 半径 和 
不 能 大 于 矩形 的 宽度 ,否则 圆 弧 大 小 都 设 为 0 ,实现 如 代码 清单 9 -6 所 示 。 

代码 清单 ”9-6 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

var g = new CVIGraph(); 

g. gLineStyle( cvi. c3b(0, 0, 0), 3); 

g. roundRect( cvi. rect(30, 30, 140, 190), 50); 


i 


RD … 

有 天 = 一 = 二 
g.roundRect( cvi. rect(230, 30, 140, 190), 20, 30, 40, 50) ; 
g. draw( context) ; 


效果 如 图 9 -6 所 示 。 


图 9-6 圆 角 矩形 


学 ”网 弧 : 

graph. arc( point, radius, startAngle, endAngle, anticlockwise) 

第 一 个 参数 point 是 点 对 象 ,表示 圆 弧 的 圆心 。 第 二 个 参数 radius 表示 的 是 圆 弧 的 半 
径 , 第 三 个 参数 startAngle 和 第 四 个 参数 endAngle 表示 圆 弧 的 起 始 角度 和 终止 角度 ,范围 
是 0 全 360, 即 单位 是 角度 制 ,默认 值 是 0 度 。 第 五 个 参数 anticlockwise 表示 圆 弧 绘制 方 
向 ,true 表示 道 时 针 方向 绘制 ,false 表示 顺 时 针 方 向 绘制 ,默认 值 是 false, 即 顺 时 针 绘制 。 

学 ”线段 : 

graph.lineTo( pointAry) 

参数 pointAry 是 一 个 数组 ,数组 元 素 是 点 对 象 ,绘图 对 象 会 把 数组 中 所 有 的 相 邻 点 都 
连接 成 线段 。 如 果 还 设置 了 闭合 属性 , 即 setClose(true) ,那么 最 后 一 个 端点 与 第 一 个 端 
点 连接 成 线段 。 

数组 中 应 该 至 少 包含 两 个 点 对 象 , 之 后 的 点 都 是 与 上 一 个 点 连接 成 线段 ,如 果 想 重 
开 另 一 端点 段 ,那么 需要 重新 调用 这 个 方法 。 

学 ”二 次 贝 塞 尔 曲线 : 

graph. quadTo( originPt，pointAry) ; 

第 一 个 参数 是 一 个 点 对 象 ,表示 的 是 二 次 贝 塞 尔 曲线 的 起 始 位 置 。 第 二 个 参数 是 一 
个 点 对 象 的 数组 ,其 中 每 两 个 点 为 一 组 ,第 一 个 点 为 此 曲线 的 控制 点 ,第 二 个 点 为 此 曲线 
的 端点 。 如 果 数 组 的 总 点 数 为 奇数 , 则 最 后 一 个 点 被 忽略 。 

利用 这 个 方法 可 以 连续 绘制 二 次 贝 塞 尔 曲线 ,后 一 段 线段 以 前 一 个 端点 为 起 点 ,如 
果 想 重 开 另 一 端点 段 , 那 么 需要 重新 调用 这 个 方法 。 

学 “三 次 贝 塞 尔 曲线 : 

graph. bezierTo( originPt，pointAry) ; 

第 一 个 参数 是 一 个 点 对 象 ,表示 的 是 三 次 贝 塞 尔 曲线 的 起 始 位 置 。 第 二 个 参数 是 一 
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个 点 对 象 的 数组 ,其 中 每 三 个 点 为 一 组 ,第 一 和 第 二 个 点 为 此 次 曲线 的 两 个 控制 点 ;第 三 
个 点 为 此 次 曲线 的 端点 。 如 果 数 组 的 总 点 数 不 是 3 的 倍数 , 则 最 后 多 余 的 点 被 省 略 。 
党” 样 条 曲线 : 
graph. splineTo( pointAry) ; 

如 果 手 动 设置 贝 塞 尔 曲线 来 绘制 圆滑 的 闭合 图 形 是 非常 烦琐 的 ,所 以 还 提供 了 根据 
端点 来 计算 控制 点 ,从 而 在 连接 端点 时 描绘 出 相对 平滑 的 连接 曲线 ,这 便 是 样 条 曲线 。 
参数 pointAry 是 一 个 点 数组 ,形式 跟 lineTo 方法 一 样 ,数组 中 的 点 都 是 每 段 线 的 头 尾 端 
点 ,只 不 过 splineTo 内 部 用 贝 塞 尔 曲 线 来 描 出 平滑 曲线 。 

实现 样 条 曲线 的 例子 如 代码 清单 9 -7 所 示 。 

代码 清单 9 -7 


var canvas = document. getElementByld(" myCanvas"); 

var context = canvas. getContext("2d"); 

var g = new CVIGraph(); 

g. gLineStyle( cvi. c3b(0, 0, 0), 3); 

g. splineTo( [cvi. p(10, 30), cvi. p(190, 30), cvi. p(80, 150), cvi. p(160, 200)]); 
g. splineTo( [cvi. p(230, 30), cvi. p(350, 100), cvi. p(300, 200)]). setClose( true); 


g. draw( context) ; 


效果 如 图 9 -7 所 示 。 


图 9-7 样 条 曲线 
人 学” 星 型 : 


graph. star( originPt，maxLen，minLen，angles) ; 
星 型 是 额外 提供 的 一 个 图 形 , 内 部 是 用 直线 绘制 而 成 的 。 第 一 个 参数 originPt 是 星 型 的 
中 心 点 位 置 ,是 一 个 点 对 象 。 第 二 个 参数 maxLen 是 星 型 上 外 顶点 距离 中 心 点 的 长 度 。 第 三 个 
参数 minLen 是 星 型 上 内 四 点 距离 中 心 点 的 长 度 ,可 忽略 ,默认 为 maxLen 的 0.4 倍 。 第 四 个 参 
数 angles 是 星 型 上 顶 角 的 数量 ,数值 必须 大 于 1, 可 忽略 ,默认 值 是 5, 即 五 角 星 。 
实现 星 型 的 例子 如 代码 清单 9 -8 所 示 。 
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代码 清单 ”9 -8 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 

var g = new CVIGraph(); 

g. gLineStyle( cvi. c3b(0, 0, 0), 3); 

g. star( cvi. p( 100, 100), 80, 20, 3); 

g. star( cvi. p(250, 100), 80, 20, 4); 

g. star( cvi. p(400, 100), 80); 

g. star( cvi. p(550, 100), 80, 30, 6); 


g. draw( context) ; 


效果 如 图 9 -8 所 示 。 


图 9 -8 星 型 


图 中 从 左 到 右 分 别 是 三 至 六 角 星 ,其 中 五 角 星 只 提供 前 两 个 参数 即 可 完成 绘制 ,如 


果 对 形状 不 满意 的 话 , 还 可 以 自行 设置 长 度 参数 。 


学 多边形: 
graph. polygon( originPt, len, sides) 
多 边 形 CVIPolygon 也 是 利用 线 型 绘制 而 成 。 第 一 个 参数 originPt 是 多 边 形 的 中 心 


点 。 第 二 个 参数 len 是 多 边 形 顶 点 到 中 心 点 的 距离 。 第 三 个 参数 sides 是 多 边 形 的 边 数 。 


实现 多 边 形 的 例子 如 代码 清单 9 -9 所 示 。 
代码 清单 9 -9 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

var g = new CVIGraph(); 

g. gLineStyle( cvi. c3b(0, 0, 0), 3); 

g. polygon( cvi. p( 100, 100), 70, 3); 

g. polygon( cvi. p(250, 100), 70, 4); 

g. polygon( cvi. p(400, 100), 70, 5); 
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g. polygon( cvi. p(550, 100), 70, 6); 
g. draw( context) ; 


效果 如 图 9 -9 所 示 。 
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图 9-9 多 边 形 


学 ”椭圆 : 
graph. ellipse( originPt, xHalfLen, yHalfLen); 
提供 的 椭圆 绘制 对 象 并 不 是 严格 意义 上 的 椭圆 ,而 是 利用 贝 塞 尔 曲线 模拟 出 来 的 ,也 
是 一 般 的 椭圆 绘制 方法 。 一 个 参数 originPt 是 椭圆 的 中 心 点 位 置 。 第 二 个 参数 xHalfLen 是 
椭圆 在 x 轴 方 向 上 的 半 轴 长 。 第 三 个 参数 yHalfLen 是 椭圆 在 y 轴 方 向 上 的 半 轴 长 。 
实现 椭圆 的 例子 如 代码 清单 9 - 10 所 示 。 
代码 清单 ”9 -10 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 

var g = new CVIGraph(); 

g. gLineStyle( cvi. c3b(0, 0, 0), 3); 

g. ellipse( cvi. p(100, 120), 50, 100); 

g. ellipse( cvi. p(250, 120), 75, 75); 

g. ellipse( cvi. p(450, 120), 100, 50); 

g. draw( context) ; 


效果 如 图 9 - 10 所 示 。 


图 9-10 椭圆 
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可 见 当 椭圆 两 方向 的 半 轴 长 相同 时 , 变 成 了 一 个 圆 形 。 
9.4 小 结 


本 章 中 介绍 了 CVIDrawJS 中 的 绘图 部 分 ,这 里 面 主要 采用 了 面向 对 象 的 编程 方法 ， 
把 所 有 图 形 的 绘制 方法 都 封装 在 绘图 对 象 中 ,并 且 提 供 了 方便 的 接口 来 改变 图 形 对 象 的 
属性 ,大 大 简化 开发 者 绘图 的 工作 量 。 

这 里 面 的 核心 对 象 是 图 形 对 象 CVIGraph ,这 个 对 象 中 除了 包含 了 线条 、 圆 弧 .和 矩形、 
贝 赛 尔 曲线 和 样 条 曲线 等 基本 图 形 , 还 封装 了 圆 角 和 矩形 . 星 型 和 多 边 形 等 绘图 对 象 。 并 
且 还 提供 了 两 种 修改 绘图 属性 的 方法 ,分 为 局 部 修改 和 全 局 修改 。 局 部 修改 只 修改 当前 
的 绘图 对 象 ,而 全 局 修改 则 把 接 下 来 所 有 绘制 图 形 的 属性 进行 修改 。 


9.5 习题 


1. 利用 引擎 提供 的 方法 绘制 奥运 五 环 ,并 且 设 置 成 相应 的 颜色 。 
2. 利用 引擎 提供 的 方法 和 画布 变换 方法 绘制 以 下 的 图 形 。 


3. 利用 引擎 提供 的 方法 和 画布 变换 方法 绘制 以 下 的 图 形 (图 中 共有 18 个 椭圆 旋转 
而 成 ) 。 
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在 正式 开始 动画 web 广告 和 休闲 游戏 制作 之 前 ,作为 预备 知识 ,本 章 简单 介绍 一 下 
动画 的 产生 方式 , 预 泻 染 方法 .多 层 画布 技术 以 及 在 动画 游戏 交互 过 程 中 的 鼠标 、 键 盘 及 
移动 设备 事件 响应 。 并 给 出 了 平移 动画 精灵 产生 、 鼠 标 及 键盘 事件 响应 的 简单 例 程 。 


10.1 动画 概述 


在 开始 制作 动画 前 , 先 来 简单 描述 一 下 动画 的 表现 形式 。 如 果 接 触 过 Flash 动画 , 那 
么 读者 应 该 会 知道 ,动画 是 由 一 帧 一 帧 的 画面 组 成 ,每 一 幅面 面 都 是 重新 构成 ,而 每 当 连 
续 播放 的 时 候 , 在 人 眼中 就 形成 了 连续 变动 的 动画 效果 。 

除了 Flash 动画 外 ,日 常 所 看 到 的 电视 或 者 电影 ,也 都 是 由 很 多 帧 画面 组 成 。 如 果 要 
让 人 了 眼 有 较 好 的 动画 效果 ,那么 每 秒 播放 的 动画 帧 一 般 需 要 24 帧 ,当然 帧 数 与 具体 的 动 
画 效 果 有 关系 ,可 以 用 较 低 的 帧 数 表 现 出 流畅 的 动画 ,而 对 于 一 些 细腻 的 动画 效果 ,或 许 
就 要 更 多 的 帧 数 ,否则 会 显 出 卡 顿 的 现象 。 

如 果 要 在 HTMLS 的 画布 上 表现 出 动画 效果 ,需要 怎么 做 呢 ? 同样 也 是 需要 连续 地 
播放 动画 帧 来 形成 动画 效果 ,因此 需要 做 的 就 是 不 断 地 在 canvas 上 重 绘图 像 ,以 每 秒 接 
近 24 次 的 速度 重新 绘制 画布 上 的 图 形 , 以 此 来 达到 动画 的 效果 。 

每 秒 重 绘 24 次 甚至 更 多 的 图 像 ,看 似 工作 量 非常 大 ,但 实际 上 对 于 电脑 的 CPU 来 
说 ,这 并 不 是 一 件 难事 。 如 果 要 提高 绘制 质量 或 者 提高 帧 数 ,那么 对 于 配置 较 低 的 电脑 
来 说 或 许 就 显得 吃力 。 

在 电脑 上 的 动画 效果 ,可 以 分 为 三 种 形式 :第 一 种 是 每 次 绘制 的 图 像 都 相同 ,不 过 每 
一 帧 的 位 置 .旋转 角度 缩放 大 小 改变 ,从 而 多 帧 结合 以 表现 出 图 像 的 移动 .旋转 、 变 大 、 
变 小 的 动画 效果 。 第 二 种 是 每 次 绘制 的 图 像 都 不 同 ,这 有 两 种 表现 形式 ,一 种 是 换 帧 动 
画 ( 精 灵 ) ,例如 鱼 游 动 时 尾巴 摆动 人 走路 时 脚 部 走动 ,如 果 要 通过 旋转 或 移动 的 方式 来 
表现 ,那么 效果 或 许 会 很 僵硬 ,所 以 为 了 简便 编程 ,一 般 是 预先 准备 好 一 系列 动作 的 图 
像 ,然后 再 连续 播放 ,那么 这 种 方式 可 简化 编程 工作 ,把 动画 的 设计 放 在 了 作画 人 员 身 
上 ; 另 一 种 是 通过 改变 图 形 的 数据 来 达到 动画 ,如 骨骼 动画 参数 约束 动画 等 。 第 三 种 是 
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混合 方式 ,如 换 帧 动画 (精灵 ) 做 平移 或 者 是 按照 特定 的 路 径 运 动 并 变换 效果 等 。 
在 开始 设计 动画 前 , 先 介绍 JavaScript 中 的 一 些 常 用 函数 。 


10.1.1 setlnterval( ) 函数 


setInterval( ) 函数 可 按照 指定 的 时 间 间 隔 来 重复 调用 某 个 函数 ,可 以 直接 在 程序 中 使 
用 这 个 函数 。 

setlnterval(fun，interval) 

这 个 函数 接收 两 个 参数 ,第 一 个 参数 是 一 个 函数 对 象 , 即 指定 要 重复 执行 的 函数 ;第 
二 个 参数 interval 是 调用 的 时 间 间 隔 , 单 位 是 毫秒 (ms) , 即 指定 了 调用 函数 以 后 ,要 隔 开 
一 段 时 间 才 再 次 调用 。 

这 个 setInterval( ) 函数 与 循环 语句 的 区 别 在 于 :setInterval( ) 指定 的 函数 是 每 隔 一 段 时 
间 才 调用 ,调用 完毕 后 ,程序 处 于 空闲 状态 ,可 以 处 理 其 他 任务 或 处 理 其 他 setInterval( ) 函数 
指定 的 任务 。 而 循环 语句 指 每 次 执行 结束 后 马上 开始 新 的 一 次 执行 ,这 时 候 程序 被 锁 死 在 
循环 语句 当中 ,其 他 的 程序 任务 都 无 法 处 理 , 因 此 遇 到 死 循环 的 时 候 , 甚 至 连 浏 览 器 也 无 法 
关闭 。 

不 过 这 里 要 注意 的 一 点 是 setInterval( ) 函数 中 指定 的 时 间 间 隔 是 期 望 的 时 间 , 每 次 
重复 执行 的 间隔 是 大 于 等 于 这 个 时 间 的 。 每 次 执行 完 指定 函数 后 ,程序 都 返回 给 浏览 器 
来 执行 其 他 的 任务 ,或 许 是 setInterval( ) 函数 指定 的 其 他 函数 ,所 以 即使 间隔 时 间 已 经 到 
达 了 ,如 果 程 序 还 被 其 他 任务 所 霸占 ,那么 还 是 无 法 执行 这 个 指定 的 函数 ,而 必须 等 到 程 
序 再 次 空闲 时 来 执行 。 因 此 ,如 果 绘 图 质量 高 ,那么 每 次 绘图 的 任务 量 就 比较 重 ;对 于 配 
置 不 够 好 的 电脑 来 说 ,每 次 绘制 的 任务 超过 了 时 间 间 隔 ,那么 动画 帧 数 将 达 不 到 预期 ,可 
能 出 现 卡 顿 的 现象 。 

那么 下 面 演示 一 下 这 个 函数 的 用 法 ,实现 如 代码 清单 10 -1 所 示 。 

代码 清单 ”10 -1 


vari = 0; 

setlnterval(function () { 
console. log(i); 
i++; 


}, 500); 


上 述 例子 是 每 隔 500 毫秒 , 即 0.5 秒 ,就 输出 i 的 值 并 把 i 的 值 加 1。 其 中 直接 在 参 
数 的 位 置 创建 了 一 个 匿名 函数 对 象 并 传人 到 函数 setInterval( ) 中 去 ,当然 也 可 以 先 定义 
一 个 隐 数 ,再 把 也 数 名 传 到 陋 数 setInterval( ) 中 去 。 
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除 此 以 外 , 哺 数 setInterval( ) 还 会 返回 一 个 值 ,表示 这 个 定时 器 的 世 ,这 个 定时 器 了 D 
的 作用 在 于 标识 这 个 定时 器 任务 , 当 需 要 停止 这 个 定时 器 任务 时 ,可 以 调用 函数 clear- 
Interval( id ) 并 传人 这 个 定时 器 ID ,来 清除 指定 IDD 的 定时 器 任务 。 


10.1.2 平移 动画 


利用 定时 器 函数 setInterval( ) ,就 可 以 设 定 每 隔 一 段 时间 ( 例 如 每 秒 60 帧 ) 控 除 画布 
并 重 绘图 像 , 从 而 模仿 电影 中 一 帧 一 帧 图 像 播放 的 效果 。 下 面 利用 这 个 函数 来 制作 一 个 
图 形 移动 的 简单 动画 。 先 来 看 看 示例 代码 ,实现 如 代码 清单 10 -2 所 示 。 
代码 清单 ”10 -2 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 
var image = new Image(); 
image. src = “" 鱼 .png"; 
image. onload = function () { 
varx = -200, y = 20; 
setlnterval(function() { 
context. clearRect(0, 0, 400, 200); 
context. save( ); 
context. translate( x, y); 
context. drawlmage( image, 0, 0); 


context. restore( ); 


xX+=1; 
if (x > = 400) { 
x = -200; 
}, 1000 / 60); 


其 中 图 片 加 载 完 毕 时 调用 回调 函数 onload ,在 回调 函数 中 调用 setInterval( ) 函数 探 除 
和 重 绘图 像 。 
首先 看 到 重复 执行 的 函数 中 ,在 每 次 重 绘图 像 之 前 ,都 要 先 调用 画布 上 下 文 对 象 的 
clearRect( ) 方法 来 控 除 画布 , 正 因为 已 经 绘制 在 画布 上 的 图 案 是 不 会 自动 清除 的 ,如 果 
不 探 除 画布 ,那么 就 会 有 重复 的 图 案 绘 制 在 画布 上 。 控 除 的 区 域 是 整 块 画布 ,而 这 次 设 
置 的 画布 大 小 是 长 400 像素 , 宽 200 像素 ,所 以 从 原点 (0,0) 开始, 探 除 长 度 为 400 像素 
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和 宽度 为 200 像素 的 区 域 。 

接 下 来 通过 调用 上 下 文 对 象 中 的 画布 平移 方法 translate( ) 来 改变 画布 原点 ,图 像 是 
根据 画布 原点 位 置 来 绘制 的 ,所 以 每 次 绘制 时 图 像 都 会 跟随 着 画布 平移 ,看 起 来 的 效果 
就 像 是 图 像 平移 了 。 

但 是 在 平移 画布 之 前 ,要 先 调用 上 下 文 对 象 的 save( ) 方 法 来 保存 目前 的 画布 矩阵 ， 
因为 平移 面 布 是 通过 改变 矩阵 来 实现 的 ,改变 后 的 和 矩阵 不 会 自动 恢复 ,如 果 下 一 次 绘图 
前 再 一 次 平移 时 ,那么 平移 效果 就 相当 于 与 前 一 次 平移 倒 加 在 一 起 ,为 此 要 在 平移 和 重 
绘图 像 以 后 ,恢复 到 之 前 的 矩阵 状态 , 即 调用 上 下 文 对 象 的 restore( ) 方 法 来 回 到 前 一 次 
save( ) 时 的 矩阵 状态 。 

下 面 把 画布 平移 距离 设 为 横向 为 -200 ,纵向 为 20, 既 画布 原点 平移 到 点 ( -200 ,20) 
位 置 上 ,此 时 调用 绘图 函数 drawImage( image, 0, 0) 将 鱼 图 像 绘 制 到 原点 位 置 ,也 就 是 平 
移 后 的 ( -200,20) 位 置 上 。 

到 目前 为 止 都 是 大 家 所 熟悉 的 画布 方法 的 调用 ,那么 下 面 开始 “移动 " 鱼 图 像 。 原 理 
非常 简单 ,只 需 在 每 一 次 重 绘图 像 后 把 下 一 次 画布 平移 的 水 平 距离 x 加 1 ,那么 连续 播放 
时 的 效果 就 相当 于 鱼 图 像 慢 慢 地 往 前 “ 游 动 "。 效 果 图 如 图 10 -1 所 示 。 


图 10 -1 鱼 图 像 游 动 效 果 


在 上 述 例子 的 最 后 加 入 了 一 条 判断 语句 , 当 x 的 值 大 于 画布 长 度 400 的 时 候 ,将 x 的 
值 恢复 到 原始 位 置 , 即 鱼 图 像 游 过 画布 之 后 ,重新 出 现在 画布 最 左 端 ,由 此 动画 效果 是 鱼 
图 像 不 断 地 从 左 往 右 游 动 。 


10.1.3 精灵 动画 


上 一 节 中 的 例子 是 常见 的 改变 画布 矩阵 得 到 的 平移 、 缩 放 旋转 动画 ;还 有 另 一 种 常 
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见 的 动画 形式 是 利用 分 割 图 像 的 方法 ,把 一 连 串 事先 准备 好 的 动画 帧 播放 ,从 而 做 到 一 
些 相 对 复杂 的 动画 ,对 图 像 做 分 割 ,类 似 于 Flash 的 精灵 动画 。 
首先 准备 好 一 连 串 连贯 的 动画 帧 并 放 在 同一 张 图 片上 ,如 图 10 -2 所 示 : 


« 


图 10 -2 和 鱼 动画 帧 


每 张 不 同 的 动画 帧 成 竖 列 放 在 同一 张 图 片上 ,同样 也 可 把 动画 帧 横向 摆 放 ,例子 中 
使 用 的 是 竖 向 摆 放 的 鱼 动画 帧 。 

播放 精灵 动画 需要 用 到 的 绘图 方法 是 drawImage( image, sx, sy, sw, sh, dx, dy, dw，, 
dh) ,这 个 方法 的 详细 介绍 可 以 查阅 第 8 章 中 的 “绘制 图 像 " 一 节 。 要 注意 的 是 参数 是 
sx, .sy .sw 和 sh, 其 中 sx 和 sy 是 源 图 像 上 的 起 始 坐 标 ,因为 只 需要 绘制 四 幅 图 片 中 的 一 
幅 , 所 以 只 需要 把 起 始 坐标 定位 到 对 应 图 像 的 左上 角 即 可 ,而 sw 和 sh 代表 要 分 割 的 图 像 
的 长 宽度 ,一般 来 说 每 一 幅 分 割 图 像 事先 都 要 做 成 长 宽度 一 样 ,这 里 是 长 度 为 201 ,宽度 
为 148 。 

精灵 动画 的 原理 是 :每 次 绘制 只 分 割 出 其 中 一 幅 图 像 并 绘制 出 来 ,每 隔 一 段 时 间 便 
重 绘 出 下 一 幅 动画 帧 ,如 此 便 可 以 做 到 按 顺 序 循环 播放 动画 帧 的 每 张 图 片 , 下 面 利 用 上 
边 给 出 的 图 像 做 一 个 精灵 动画 ,实现 如 代码 清单 10 -3 所 示 。 

代码 清单 ”10 -3 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 
var image = new Image(); 
image. src =“" 鱼 动画 . png"; 
image. onload = function () { 
var frm = 0; 
setlnterval(function() { 
context. clearRect(0, 0, 250, 200); 
context. drawlmage( image, 0, frm* 148, 201, 148, 20, 20, 201, 148); 
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frm + +; 
i (frm > = 4) frm = 0; 
}, 200); 


重 绘 前 ,同样 需要 先 擦 除 夯 布 上 的 图 像 ,之 后 每 一 次 绘制 图 片 都 选取 不 同 的 动画 帧 。 

由 于 动画 帧 排列 是 纵向 的 ,因此 动画 帧 的 起 始 坐标 的 横 坐 标 sx 不 用 改变 ,只 需 改 变 
纵 坐 标 sy 即 可 。 而 每 幅 图 片 的 高 度 是 148 ,因此 每 张 动画 帧 相距 的 纵向 距离 也 为 148 ,所 
以 sy 改变 的 值 为 148 ,得 出 第 fm + 1 幅 动画 帧 的 纵 坐 标 为 frm * 148。 

而 后 四 个 参数 就 代表 在 位 置 (20 ,20) 开 始 绘制 图 像 ,长 宽度 为 201 * 148。 

效果 如 图 10 -3 所 示 。 


图 10 -3 精灵 动画 


在 循环 绘制 动画 帧 前 先 定义 了 一 个 变量 frm 并 初始 化 为 0, 代表 的 是 目前 的 动画 帧 。 
然后 在 绘制 完 一 张 动画 帧 后 将 frm 值 自 增 1 ,因此 下 一 次 绘制 下 一 张 动画 帧 。 在 最 后 添 
加 一 个 判断 语句 , 当 frm 值 大 于 等 于 4 时 重 置 为 0, 即 绘制 完 四 张 动画 帧 后 重新 从 第 一 张 
动画 帧 开始 绘制 下 来 。 


10.2 提高 绘图 效能 


10.2.1 预演 染 


上 一 节 中 谈 到 了 精灵 动画 的 制作 方法 ,会 发 现 当 播放 这 个 动画 帧 的 时 候 ,通常 是 在 
连续 的 多 个 帧 之 中 重复 绘制 相似 的 几 个 动画 帧 ,因此 可 以 先 把 图 像 中 不 同 动画 帧 先 绘制 
在 一 个 不 可 见 的 画布 上 , 当 需 要 更 换 动 画 帧 时 ,再 把 这 个 预先 绘制 好 的 画布 泻 染 到 可 见 
的 画布 上 。 这 种 预 浑 染 的 技术 能 够 极 大 地 提供 绘图 效率 ,尤其 适用 于 精灵 动画 ,对 于 移 
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动 设备 来 说 ,这 种 技术 降低 了 性 能 开销 减少 了 移动 设备 的 电池 损耗 。 
下 面 利 用 这 一 技术 ,把 不 同 的 动画 帧 预先 绘制 到 不 可 见 的 canvas 上 ,需要 更 换 显示 
动画 帧 时 才 把 不 同 的 canvas 演 染 到 可 见 画 布 中 。 实 现 例子 如 代码 清单 10 -4 所 示 。 
代码 清单 ”10 -4 


var canvas = document. getElementByld( " myCanvas " ) ; 
var context = canvas. getContext("2d"); 
var image = new Image(); 
image. src =“" 鱼 动画 .png"; 
image. onload = function () { 
var frames = []; 
for(vari=0;i<4; i++){ 
var can = document. createElement( " canvas" ) ; 
can. width = 201; 
can. height = 148; 
var ctx = can. getContext("2d"); 
ctx. drawlmage(image，0，i * 148, 201, 148, 0, 0, 201, 148); 


frames[i] = can; 


var frm = 0; 

setlnterval(function() { 
context. clearRect(0, 0, 250，200); 
context. drawlmage(frames[ frm], 20, 20); 
frm + +; 
if (frm >=4) frm = 0; 

}, 200); 


在 图 像 加 载 完 后 ,并 不 是 马上 在 面 布 上 绘制 图 像 中 的 动画 帧 ,而 是 先 利 用 一 个 循环 
语句 ,循环 4 次 把 图 像 上 的 4 张 动画 帧 分 别 绘制 到 一 个 新 建 的 canvas 对 象 ,并 放 入 到 数 
组 frames 中 ,此 时 就 是 所 提 到 的 预 泻 染 过 程 。 

经 过 预选 演 染 ,数组 对 象 fames 中 的 4 个 元 素 分 别 保存 了 绘制 有 4 张 动画 帧 的 不 可 
见 canvas, 下 一 步 的 工作 就 是 重复 绘制 图 像 了 ,依次 绘制 的 对 象 是 先前 准备 好 的 canvas 
对 象 而 不 是 图 像 对 象 image。 最 终 的 精灵 动画 效果 与 之 前 所 看 见 的 基本 上 没有 区 别 , 只 
不 过 采用 这 种 预 泻 染 的 技术 能 够 获取 极 大 的 性 能 提高 。 
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10.2.2 多 层 画 布 


在 很 多 的 时 候 , 例 如 动画 、 广 告 和 游戏 中 ,都 是 由 固定 不 动 的 背景 图 和 动态 的 图 像 
(前 景 ) 组 合 而 成 的 。 面 对 这 种 情况 ,每 一 次 重 绘画 布 时 ,都 需要 把 背景 和 前 景 全 部 擦 除 ， 
然后 再 重新 绘制 ,但 是 绘制 背景 图 的 费用 是 很 高 昂 的 ,并 且 实 际 上 并 不 需要 重 绘 背景 图 。 
既然 只 有 前 景 有 变化 ,那么 只 需 重 绘 前 景 就 好 了 。 

怎么 做 到 这 一 点 呢 ? 就 需要 把 画布 分 层 , 一 般 来 说 可 以 分 为 专门 绘制 背景 图 的 背景 
画布 和 专门 绘制 动态 前 景 图 的 前 景 画布 。 每 次 需要 修改 前 景 图 时 ,背景 画布 保持 原样 ， 
只 需 擦 除 前 景 面 布 并 重 绘 即 可 ,这 样 做 也 能 把 绘图 性 能 提高 很 多 。 

设置 多 层面 布 的 方法 的 程序 段 如 代码 清单 10 -5 所 示 。 

代码 清单 ”10 -5 


<canvas id =" background" width ="800" height ="374" style =" border: solid; position: abso- 
lute; z ~index: 0" > 
</canvas > 
<canvas id ="myCanvas" width ="800" height ="374" style ="border: solid; position: absolute; 
z-index: 1" > 
你 的 浏览 器 不 支持 canvas 画布 元 素 , 请 更 新 浏览 器 获得 演示 效果 . 


</canvas > 


设置 style 属性 中 的 " position :absolute" ,意思 是 令 两 张 面 布 绝对 定位 并 重生 在 一 起 ， 
形成 分 层 的 画布 。 随 后 还 在 设置 画布 的 "z -index" , 即 为 多 层面 布设 置 一 个 前 后 顺序 , 数 
值 越 大 代表 越 上 层 ,那么 前 景 的 图 像 就 不 会 被 背景 挡住 了 。 
随后 分 别 在 背景 画布 中 绘制 背景 图 像 ,在 前 景 画 布 中 绘制 平移 游 动 的 鱼 图 像 ,每 次 
鱼 更 改 位 置 时 只 需 重 绘 前 景 画布 就 可 以 了 ,实现 例子 如 代码 清单 10 -6 所 示 。 
代码 清单 ”10 -6 


var backCanvas = document. getElementByld("background"); 
var backContext = backCanvas. getContext("2d"); 
var background = new Image(); 
background. src = "海底 . png"; 
background. onload = function () { 
backContext. drawlmage!( background, 0, 0); 
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var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 
var image = new Image(); 
image. src =" 鱼 .png"; 
image. onload = function () { 
varx = -200, y = 150; 
setInterval( function( ) { 
context. clearRect(0, 0, 800, 374); 
context. save( ); 
context. translate( x, y); 
context. drawlmage( image, 0, 0); 


context. restore( ); 


xX+=1; 
if (x > = 800) { 
x = -200; 
. 
}, 1000 / 60); 


上 述 代码 都 是 前 面 已 讲述 过 的 ,差别 主要 在 于 :分 开 了 两 层 的 画布 ,一 个 用 于 绘制 静 
态 的 背景 图 ; 另 一 个 绘制 动态 的 前 景 图 。 

虽然 编码 相 比 起 一 张 画布 来 说 稍微 复杂 些 , 但 是 性 能 却 可 以 大 大 提高 ,所 以 多 付出 
的 功夫 还 是 值得 的 。 

在 后 续 章 节 代码 中 ,为 了 方便 讲述 和 容易 理解 ,统一 采用 只 在 一 张 画布 中 重 绘 ,有 兴 
趣 的 读者 可 以 修改 示例 源码 ,分 别 采用 预 泻 染 和 多 层 画布 技术 。 


10.3 ”消息 哆 应 


10.3.1 鼠标 响应 


在 HTMLS 动画 交互 响应 也 成 了 很 重要 的 角色 ,所 谓 的 交互 就 是 指 按照 用 户 的 输入 
而 产生 响应 ,一般 是 针对 用 户 的 鼠标 或 键盘 产生 的 响应 行为 。 下 面 介绍 几 个 函数 来 让 面 
布 对 鼠标 响应 产生 反应 。 
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利用 浏览 器 DOM 中 提供 的 方法 addEventListener( ) 来 为 一 个 元 素 添加 鼠标 响应 ， 
如 下 。 

canvas. addEventListener( type , listener, useCapture ) 

这 个 方法 接收 三 个 参数 ,第 一 个 参数 type 是 指 监 听 的 时 间 类 型 ,DOM 除了 对 鼠标 能 
产生 响应 ,还 可 以 对 键盘 能 产生 响应 ,所 以 添加 鼠标 响应 时 用 到 的 类 型 有 “mousedown”、 
“mousemove” 和 “ mouseup” 。 

第 二 个 参数 listener 是 指 监听 的 响应 函数 , 即 当 事件 发 生 时 调用 的 函数 。 于 是 利用 这 
个 函数 可 以 得 知 鼠标 点 击 的 位 置 和 动作 。 

第 三 个 参数 useCapture 是 指 是 否 捕获 鼠标 事件 ,输入 false 就 好 。 

对 于 事件 类 型 ype, 若 为 " mousedown" , 则 在 鼠标 按 下 的 时 候 调 用 。 若 为 " mouse- 
move" , 则 在 鼠标 移动 的 时 候 调 用 ,所 以 在 鼠标 移动 的 过 程 中 ,mousemove 事件 会 调用 多 
次 。 若 为 “mouseup” , 则 在 鼠标 松 开 的 时 候 调 用 。 给 出 下 面 一 段 例子 来 测试 一 下 鼠标 响 
应 时 间 , 实 现 例子 如 代码 清单 10 -7 所 示 。 

代码 清单 ”10 -7 


var canvas = document. getElementByld("myCanvas"); 


var context = canvas. getContext("2d"); 


canvas. addEventListener(" mousedown", function (e) { 
console. log( " mousedown" ); 


}, false); 


canvas. addEventListener( " mousemove", function (e) { 
console. log( " mousemove" ); 


}, false); 


canvas. addEventListener( " mouseup", function (e) { 
console. log(" mouseup" ); 


}, false); 


有 时 候 需 要 检测 鼠标 拖 动 ( 按 下 状态 时 的 移动 ) 的 消息 响应 ,这 个 也 非常 容易 实现 ， 
只 需 添加 一 个 变量 来 记录 鼠标 是 否 按 下 的 状态 ,然后 在 mousemove 的 响应 中 判断 这 个 状 
态 即 可 知道 是 否 是 鼠标 拖 动 , 实 现 例 子 如 代码 清单 10 -8 所 示 。 
代码 清单 ”10 -8 


var canvas = document. getElementByld("myCanvas"); 
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var context = canvas. getContext("2d"); 


var isMouseDown = false; 


canvas. addEventListener( " mousedown", function (e) { 
console. log( " mousedown" ); 
isMouseDown = true; 


}, false); 


canvas. addEventListener( " mousemove", function (e) { 
if (isMouseDown) { 
console. log( "mousedrag " ); 
} else { 
console. log( " mousemove" ) ; 


}, false); 


canvas. addEventListener( " mouseup", function (e) { 
console. log( " mouseup" ); 
isMouseDown = false; 


}, false); 


定义 了 一 个 变量 isMouseDown 来 记录 鼠标 按 下 的 状态 ,false 代表 鼠标 没有 按 下 ,true 


10.3.2 鼠标 事件 中 的 属性 


代表 鼠标 按 下 了 。 因 此 在 mousedown 消息 响应 中 把 变量 isMouseDown 赋值 为 true, 在 
mouseup 消息 响应 中 把 变量 isMouseDown 赋值 为 false, 即 可 记录 下 鼠标 按 下 的 状态 。 


每 当 事 件 发 生 就 会 调用 响应 函数 ( 即 函 数 的 listener 函数 ) ,并 且 传 人 一 个 event 对 象 


的 参数 。 这 个 event 对 象 包含 了 事件 的 各 种 信息 。 对 于 鼠标 响应 事件 ,里 面包 含 了 鼠标 
事件 发 生 时 鼠标 所 在 的 坐标 位 置 ,因此 可 以 获取 到 鼠标 位 置 。 


下 面 看 一 个 例子 ,用 addEventListener 函数 获取 鼠标 按 下 时 的 鼠标 位 置 ,实现 例子 如 


代码 清单 10 -9 所 示 。 


代码 清单 ”10 -9 


var canvas = document. getElementByld("myCanvas"); 


var context = canvas. getContext("2d"); 
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canvas. addEventListener( " mousedown", function (e) { 
var mouseX = e.pageX - canvas. clientLeft; 
var mouseY = e.pageY - canvas. clientTop; 
console. log( mouseX + "," + mouseY) ; 


}, false); 


上 述 例子 中 ,定义 了 一 个 匿名 函数 并 传人 到 addEventListener 函数 的 监听 冰 数 中 , 因 
此 每 次 单 击 鼠 标 就 会 调用 这 个 匿名 函数 。 匿 名 郴 数 接收 一 个 参数 ,这 个 是 浏览 器 获取 鼠 
标 单 击 事件 的 信息 ,保存 到 一 个 对 象 event 并 转 入 到 这 个 函数 中 ,因此 获取 这 个 对 象 的 
pageX 和 pageY 属性 ,这 两 个 属性 记录 了 单 击 时 鼠标 相对 于 页 面 的 坐标 位 置 ,同样 是 以 左 
上 和 角 为 坐标 原点 。 因 此 用 这 两 个 属性 减 去 画布 的 顶部 位 置 和 左边 框 的 位 置 即 得 到 了 鼠 
标 在 画布 上 的 所 在 位 置 。 


10.3.3 简单 画板 


利用 鼠标 响应 和 绘图 函数 ,可 以 简单 地 记录 鼠标 滑 过 的 痕迹 ,并 绘制 出 其 上 的 线条 ， 
即 做 一 个 简单 画板 ,只 要 单 击 鼠 标 并 在 画布 上 移动 , 即 可 绘制 线条 ,就 像 系 统 画图 上 的 做 
图 功能 一 样 。 

最 终 效 果 图 如 图 10 -4 所 示 。 
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图 10 -4 画板 效果 


下 面 给 出 简单 画板 的 代码 清单 ,实现 如 代码 清单 10 -10 所 示 。 
代码 清单 ”10 -10 


var canvas = document. getElementByld("myCanvas"); 


var context = canvas. getContext("2d"); 
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var mouseDown = false; 

var mouseX = 0; 

var mouseY = 0; 

var preX = 0; 

var preY = 0; 

canvas. addEventListener( " mousedown" ，onMouseDown， false) ; 
canvas. addEventListener( " mousemove", onMouseMove, false); 


canvas. addEventListener( " mouseup", onMouseUp, false); 


function onMouseDown(e) { 
mouseDown = true; 
preX = e.pageX - canvas. clientLeft; 


preY = e.pageY - canvas. clientTop; 


function onMouseMove(e) { 
if (mouseDown) { 
mouseX = e.pageX - canvas. clientLeft; 
mouseY = e.pageY - canvas. clientTop; 
context. lineWidth = 2; 
context. beginPath() ; 
context. moveTo( preX，preY) ; 
context. lineTo( mouseX, mouseY); 
context. stroke( ); 
preX = mouseX; 


preY = mouseY; 


function onMouseUp(e) { 


mouseDown = false 


上 述 代码 中 ,利用 addEventListener( ) 方 法 为 画布 元 素 canvas 添加 了 三 个 事件 响应 : 
canvas. addEventListener( " mousedown", onMouseDown, false) ; 
canvas. addEventListener( " mousemove", onMouseMove, false); 


canvas. addEventListener( " mouseup", onMouseUp, false); 
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分 别 是 mousedown 鼠标 按 下 事件 .mousemove 鼠标 移动 事件 和 mouseup 鼠标 松 开 寻 
件 , 并 且 对 事件 的 响应 分 别 调用 对 应 的 函数 onMouseDown( ) .onMouseMove( ) 和 onMouse- 
Up( ) ,这 三 个 函数 都 之 后 定义 。 要 注意 的 一 点 是 ,虽然 执行 到 添加 事件 响应 时 这 三 个 响 
应 函数 还 没有 定义 ,但 是 JavaSeript 是 允许 的 。 只 要 在 同一 个 文件 中 定义 了 函数 ,那么 在 
同文 件 中 的 任何 位 置 都 可 以 访问 到 这 个 定义 的 函数 ,所 以 上 述 三 种 情况 下 的 事件 发 生 ， 
都 能 够 调用 负责 处 理事 件 的 函数 。 

在 程序 开始 处 定义 5 个 全 局 变量 mouseDown .mouseX .mouseY .preX 和 preY。 其 中 
mouseDown 用 于 保存 此 时 鼠标 状态 是 否 处 于 按 下 状态 ,因为 想 要 鼠标 按 下 以 后 才 开始 绘 
制 线条 ,所 以 要 通过 判定 这 个 变量 来 检测 鼠标 是 否 为 按 下 状态 。 

而 mouseX 和 mouseY 保存 的 是 此 时 刻 鼠 标的 位 置 ,preX 和 preY 保存 的 是 上 一 次 鼠 
标 响 应 时 鼠标 的 位 置 。 这 四 个 变量 主要 用 于 记录 鼠标 移动 时 滑 过 的 痕迹 ,以 便 在 这 两 个 
位 置 上 绘制 直线 。 

在 函数 onMouseDown( ) 中 的 任务 是 记录 鼠标 按 下 的 状态 , 即 赋值 rue 给 mouseDown， 
并 且 记录 下 鼠标 按 下 时 的 位 置 ,从 而 当 鼠 标 移动 时 能 够 绘制 移动 轨迹 。 

函数 onMouseUp( ) 负责 的 是 取消 鼠标 按 下 的 状态 , 即 赋值 false 给 mouseDown。 

函数 onMouseMove( ) 负责 的 是 判断 鼠标 是 否 处 于 按 下 状态 ,如 果 不 是 , 则 什么 都 不 
做 。 如 果 鼠 标 按 下 了 ,那么 获取 实际 鼠标 的 位 置 ,并 且 从 上 一 个 位 置 绘制 直线 到 当前 位 
置 ,如 下 。 


mouseX = e.pageX - canvas. clientLeft; 


是 


mouseY = e.pageY - canvas. clientTop; 
context. lineWidth = 2; 
context. beginPath( ) ; 
context. moveTo( preX, preY); 
context. lineTo( mouseX, mouseY); 
context. stroke( ); 
最 后 更 新 当前 位 置 给 preX 和 preY ,如 下 。 
preX = mouseX; 
preY = mouseY; 
运行 以 上 代码 后 ,浏览 器 中 的 画布 就 会 监听 鼠标 事件 , 按 下 鼠标 就 可 以 在 画布 上 绘 
图 了 。 


10.3.4 键盘 响应 
除了 鼠标 响应 以 外 ,有 时 候 也 需要 用 到 键盘 响应 ,例如 常用 的 方向 键 和 英文 数字 键 ， 


而 这 个 时 候 就 需要 为 浏览 器 添加 键盘 响应 。 添 加 的 方法 跟 鼠 标 响应 添加 方法 一 致 ,要 使 
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用 到 DOM 中 提供 的 方法 addEventListener( ) ,不 过 这 时 候 在 参数 pe 中 的 类 型 有 所 不 同 。 
键盘 响应 中 一 共有 三 种 不 同 的 响应 类 型 ,分别 是 "keydown" 、" keypress" 和 "keyup" ," 
keydown" 和 keypress" 类 型 对 应 的 键盘 事件 是 键盘 按 下 ,而 " keyup" 对 应 的 事件 为 键盘 
松 开 。 
下 面 给 出 一 个 测试 例子 ,用 于 响应 键盘 响应 ,实现 例子 如 代码 清单 10 - 11 所 示 。 
代码 清单 ”10 -11 


var canvas = document. getElementByld(" myCanvas"); 


var context = canvas. getContext("2d"); 


document. addEventListener(" keydown", function (e) { 
console. log( " keydown" ); 


}, false); 


document. addEventListener( " keypress", function (e) { 
console. log( " keypress" ); 


}, false); 


document. addEventListener( " keyup", function (e) { 
console. log( " keyup" ); 


}, false); 


在 上 述 例子 中 分 别 添加 了 "keydown" 、" keypress" 和 "keyup" 的 键盘 响应 ,并 且 在 响应 
函数 中 向 调试 台 输 出 相应 的 信息 ,以 此 来 测试 键盘 响应 的 发 生 顺 序 。" keydown" 和 " key- 
press" 差别 在 于 ,类 型 "keydown" 和 "keyup" 对 键盘 上 的 大 部 分 按键 都 能 够 响应 ,包括 系统 
功能 键 (例如 退 格 键 .Ctrl 键 或 Alt 键 等 ) ,但 是 它们 对 字母 大 小 写 输入 不 敏感 ,可 以 说 这 
两 种 类 型 的 键盘 响应 时 针对 键盘 上 的 按键 ,而 不 是 按键 的 含义 。 而 类 型 " keypress" 不 能 
检测 到 系统 功能 键 的 按 下 ,但 是 能 够 对 大 小 写字 母 进行 识别 。 

上 述 例 子 中 需要 注意 的 一 点 是 ;添加 键盘 响应 的 对 象 是 document 而 并 非 是 canvas， 
否则 对 canvas 添加 键盘 响应 会 没有 效果 。 


10.3.5 键盘 事件 中 的 属性 
对 于 键盘 响应 时 间 ,同样 能 够 在 响应 函数 中 获取 到 传 进来 的 事件 对 象 Event, 这 个 对 


象 也 包含 了 按 下 键盘 时 的 各 种 属性 值 ,一般 来 说 只 需要 知道 其 中 的 属性 值 keyCode 即 可 ， 
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这 个 属性 值 代表 了 按 下 键 的 虚拟 键 码 值 。 

这 里 要 注意 的 一 点 是 ,对 于 个 别 浏览 器 ,event 对 象 还 可 能 包含 属性 值 charCode, 这 个 
属性 值 在 "keydown" 和 " keyup" 时 为 0, 而 在 " keypress" 时 代表 了 按 下 的 字符 值 。 对 于 这 
种 情况 ,建议 只 使 用 类 型 "keydown" 和 " keyup" 的 键盘 事件 ,因为 这 两 个 类 型 在 不 同 浏览 
器 下 的 行为 大 致 相同 。 

下 面 给 出 在 Google 浏览 器 上 测试 的 结果 ,实现 例子 如 代码 清单 10 - 12 所 示 。 

代码 清单 ”10 -12 


。 
人 
om 


var canvas = document. getElementByld(" myCanvas"); 


var context = canvas. getContext("2d"); 


document. addEventListener(" keydown", function (e) { 
console. log( " keydown" ); 
console. log( e. keyCode) ; 


}, false); 


document. addEventListener( " keypress", function (e) { 
console. log( " keypress" ); 
console. log( e. keyCode) ; 


}, false); 


document. addEventListener( " keyup", function (e) { 
console. log( " keyup" ); 
console. log( e. keyCode) ; 


}, false); 


在 每 个 响应 函数 的 后 面 添加 了 把 keyCode 属性 值 输出 的 控制 台 上 显示 。 
"keydown" 和 "keyup" 事件 对 大 小 写 不 敏感 , 即 无 论 是 大 写 或 是 小 写 状 态 下 输入 字 
符 , 获 取 到 的 keyCode 的 虚拟 键 码 值 都 一 样 ,那么 应 该 怎样 去 判别 大 小 写 输 入 呢 ? 只 需 用 
一 个 变量 来 记录 shift 键 按 下 的 状态 , 按 下 状态 时 的 字符 为 大 写 , 松 开 状 态 时 的 字符 为 小 
写 ,利用 同样 的 方法 也 可 以 记录 键 " Caps Lock" 的 状态 ,这 里 只 演示 记录 shift 键 的 情况 ， 
实现 例子 如 代码 清单 10 - 13 所 示 。 
代码 清单 ”10 -13 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 


var isShiftDown = false; 
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document. addEventListener(" keydown", function (e) { 
if (e. keyCode = = 16) { 
isShiftDown = true; 
} 
if (€. keyCode = = 65) { 
if (isShiftDown) { 
console. log(" 输 入 了 大 写字 母 A") 
} else { 
console. log(" 输 入 了 小 写字 母 a") 


$ 


}, false); 


document. addEventListener( " keyup", function (e) { 
if (e. keyCode = = 16) { 
isShiftDown = false; 
} 


}, false); 


代码 中 用 变量 isShiftDown 记录 下 “shift" 键 的 按 下 状态 ,false 代表 “shift” 键 松 开 ,bue 
代表 “shift” 键 按 下 ,相对 应 地 在 " keydown" 中 检测 虚拟 键 码 值 , 若 为 16 , 即 “shift" 键 按 下 
了 ,将 变量 isShiftDown 赋值 为 true, 而 在 " keyup" 则 设置 为 false。 

基于 上 述 例子 ,做 一 个 简单 的 “记事 本 ”程序 。 这 个 程序 中 要 用 到 的 函数 新 增 有 
String. fromCharCode( keycode) ,这 个 函数 接收 一 个 字符 代码 为 参数 ,再 把 代码 对 应 的 大 小 


写字 符 作为 返回 值 ,因此 利用 函数 可 以 获取 到 按 下 的 字符 。 


上 下 文 对 象 的 measureText( string ) 方法 ,这 个 方法 用 
于 返回 字符 串 的 宽度 ,因为 当 打 印字 符 的 总 长 度 超过 画布 
范围 时 ,需要 换行 ,因此 用 这 个 方法 来 测定 字符 串 宽 度 与 
画布 宽度 的 大 小 关系 ,以 此 来 判定 换行 时 机 。 

当然 还 有 绘制 文本 的 方法 fillText( string,x,y)。 

最 终 效 果 如 图 10 -5 所 示 。 

下 面 给 出 实现 如 代码 清单 10 - 14 所 示 。 
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代码 清 10 -14 


var canvas = document. getElementByld(" myCanvas"); 

var context = canvas. getContext("2d"); 

document. addEventListener( " keydown", onKeyDown, false); 
document. addEventListener( " keyup", onKeyUp, false); 
setlnterval( update, 1000 / 60); 

var isShiftDown = false; 

var text = []; 


var string = ""; 


function onKeyDown(e) { 
var code = e. keyCode; 
i (code = = 16) { 
isShiftDown = true; 
} 
if (code > = 65 && code < = 90) { 
if (isShiftDown) { 
string + = String. fromCharCode( code); 
} else { 
string + = String. fromCharCode( code + 32); 


} 
function onKeyUp(e) { 
if (e. keyCode = = 16) { 
isShiftDown = false; 


var x = 10, y = 40; 
function update() { 
context. clearRect(0, 0, 400, 400); 
context. save( ); 
context. font = "40px Arial"; 
context. filText( string, x, y); 
if ( context. measureText( string) . width > = 360) { 
text. push( string) ; 


Fe 
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Shing = ""; 
y + = 40; 
} 
for (vari = 0; i < text. length; i+ +) { 
context. fillText(text[i], x, (i + 1) * 40); 
} 


context. restore( ); 


在 上 述 代码 中 ,首先 定义 3 个 函数 onKeyDown 、onKeyUp 和 update ,分别 是 键盘 按 下 
响应 函数 .键盘 松 开 响 应 函数 和 更 新 文本 函数 。 

在 onKeyDown 响应 函数 中 ,同样 地 使 用 一 个 全 局 变量 isShiftDown 来 记录 “shift" 键 的 
按 下 状态 ,以 此 判定 输入 字符 的 大 小 写 。 并 且 通 过 查 表 知 道 , 字 符 A 一 Z 对 应 的 虚拟 键 
码 值 为 65 一 90 ,可 以 加 入 一 个 判断 语句 ,只 有 键 码 在 这 范围 内 才 响 应 并 添加 在 文本 中 。 
在 内 部 通过 判断 isShiftDown 的 状态 , 按 下 时 直接 把 虚拟 键 码 值 转 为 字符 , 即 为 大 写 状 态 。 
否则 把 键 码 值 加 上 32 后 再 转 为 小 写字 符 , 其 中 的 值 32 是 小 写字 母 比 大 写字 母 多 出 的 键 
码 值 。 

在 onKeyUp 响应 函数 中 ,只 负责 改变 isShiftDown 的 状态 , 当 松 开 *shift” 键 的 时 候 , 将 
变量 isShiftDown 赋值 为 false。 

在 update 更 新 函数 中 ,主要 任务 是 把 全 局 变量 string 中 记录 下 的 打印 文本 绘制 到 画 
布 上 。 在 每 次 重 绘 前 一 定 要 先 擦 除 面 布 ,之 后 设置 文本 的 字体 大 小 和 字体 名 称 ,并 且 把 
string 中 的 文本 绘制 到 画布 上 。 

但 是 需要 做 的 额外 操作 是 判定 文本 宽度 , 当 超出 画布 范围 时 进行 换行 。 为 此 利用 了 
上 下 文 对 象 的 方法 context. measureText( string) ,这 个 方法 返回 一 个 对 象 ,这 个 对 象 中 的 属 
性 width 表示 了 文本 在 画布 中 占据 的 宽度 。 如 果 超 出 画布 宽度 ,那么 把 这 一 行文 本 添加 
到 一 个 数组 text 中 ,这 个 数组 的 每 一 个 元 素 代表 的 是 每 一 行文 本 。 之 后 把 string 清空 ,并 
且 把 绘制 位 置 往 下 移动 40 个 距离 , 即 进行 操作 y + = 40。 

剩 下 的 工作 是 绘制 已 经 记录 在 text 数组 中 的 文本 ,利用 一 个 for 循环 语句 编 历 text 数 
组 ,并 把 每 一 行文 本 绘制 在 画布 对 应 的 位 置 上 。 


10.4 设备 事 { 


前 面 也 提 到 过 了 ,HTMLS 的 发 展 趋势 在 于 移动 设备 。 如 今 智能 手机 和 平板 电脑 随处 
可 见 , 基 于 这 些 设 备 的 操作 上 ,浏览 器 中 特别 为 了 移动 设备 的 交互 而 引入 了 一 种 新 的 操 
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作 方式 , 随 之 新 的 设备 事件 就 应 运 而 生 了 。 


10.4.1 触摸 与 手势 事件 


早期 i0S 版 的 Safari 浏览 器 最 先 增设 了 手机 的 触摸 事件 , 随 着 安 上 车 机 的 发 展 和 进入 
市 场 ,随后 W3C 组 织 规范 了 touch 事件 。 目 前 大 多 数 浏览 器 都 支持 了 移动 设备 中 的 触摸 
和 手势 事件 。 

其 中 触摸 事件 的 行为 与 鼠标 响应 事件 非常 相近 ,所 以 事件 类 型 和 属性 中 都 可 看 出 是 
鼠标 事件 的 变形 。 以 下 是 触摸 事件 的 各 种 事件 类 型 。 

学。 touchstart: 当 手 指 开始 接触 屏幕 时 触发 。 

党。 touchmove: 当 手指 在 屏幕 上 滑动 时 连续 触摸 。 

学 touchend: 当 手指 移 开 屏幕 时 触摸 。 

党 touchcancel: 当 系统 取消 对 触摸 跟踪 时 触摸 。 

其 中 添加 事件 的 方法 为 

document. addEventListener( "touchstart", fun(e@) {}); 
document. addEventListener( "touchmove", fun(e) {}); 
document. addEventListener( " touchend", fun(e) {}); 
document. addEventListener( "touchcancel"，fun(e) {}); 

其 中 触摸 事件 传人 的 事件 对 象 中 ,都 提供 了 鼠标 事件 中 的 常见 属性 ,包括 有 熟悉 的 
pageX 和 pageY。 但 是 稍 有 不 同 的 是 :触摸 事件 中 还 包括 了 另外 3 个 属性 ,分 别 是 touches 
属性 targetTouches 属性 和 changeTouches 属性 ,这 3 个 属性 都 是 一 个 数组 对 象 ,保存 了 当 
前 的 所 有 触摸 对 象 , 即 触 摸 到 屏幕 上 的 所 有 对 象 数 。 由 于 目前 支持 多 点 触摸 的 浏览 器 数 
并 不 大 ,因此 一 般 情况 下 触摸 对 象 只 有 1 个 。 

由 于 Chrome 浏览 器 便于 开发 者 开发 适用 于 手机 浏览 器 的 应 用 网 站 ,特意 在 浏览 器 
中 加 入 了 手机 浏览 器 模拟 器 ,因此 可 利用 该 模拟 器 测试 以 下 触摸 事件 , 下 面 给 出 测试 的 
实现 如 代码 清单 10 -15 所 示 。 

代码 清单 ”10 -15 


var canvas = document. getElementByld( "myCanvas " ) ; 
var context = canvas. getContext("2d"); 
canvas. addEventListener( "touchstart", function (e) { 
console. log( "touch start" ); 
console. log( e. touches[ 0] . pageX); 
console. log( e. touches[ 0] . pageY) ; 
}); 
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canvas. addEventListener( "touchmove", function (e) { 
console. log( "touch move" ) ; 

]); 

canvas. addEventListener( "touchend", function (e) { 
console. log( "touch end" ); 

D); 

canvas. addEventListener( "touchcancel", function (e) { 
console. log( "touch cance!l"); 


); 


分 别 为 4 种 触摸 事件 类 型 添加 事件 响应 ,并 在 触摸 发 生 时 获取 第 一 个 触摸 对 象 并 输 
出 该 对 象 所 在 的 页 面 位 置 。 

运行 浏览 器 ,发 生 鼠 标 对 画布 完全 不 起 作用 ,所 以 只 能 利用 Chrome 浏览 器 提供 的 手 
机 浏览 器 模拟 器 来 测试 代码 。 

步骤 是 :打开 “开发 者 工具 ”, 在 下方 弹出 来 的 调试 台中 ,找到 右上 角 中 的 小 图 标 如 


图 10 -6 所 示 。 
[ 尖 类 口 .x 


图 10 -6 小 图 标 


标识 显示 着 “Show console”, 单 击 打开 , 可 见 调试 台 下 面 再 多 出 来 一 个 手机 浏览 器 模 
拟 器 。 此 时 选择 *Emulation”, 并 选择 其 中 一 款 手 机 型 号 , 单 击 *Emulate" 后 即 成 功 运行 手 
机 模拟 器 。 此 时 显示 页 面 变 小 ,模仿 出 在 手机 屏幕 上 看 到 的 大 小 ,并 且 鼠 标 光 标 也 变 成 
了 圆 状 ,用 来 模拟 手指 的 点 击 。 

此 时 点 击 画 布 中 的 空白 位 置 ,可 见 调试 台 分 别 输出 了 触摸 位 置 和 事件 响应 时 输出 的 
消息 。 

如 果 没 有 在 Chrome 浏览 器 中 找到 响应 的 设置 按钮 ,请 尝试 更 新 到 最 新 版 本 。 

除 此 以 外 ,部 分 浏览 器 还 支持 手势 事件 ,用 于 改变 显示 项 的 大 小 或 者 旋转 显示 项 。 
在 iOS 的 Safari 浏览 器 下 ,分 别 有 以 下 3 个 手势 事件 。 

学 gesturestart: 当 一 个 手指 已 经 落 在 屏幕 上 时 , 另 一 个 手指 又 触摸 了 屏幕 。 

人 gesturechange: 当 触 摸 屏幕 的 任何 一 个 手指 位 置 发 生变 化 时 。 

学 ”gestureebd: 当 任何 一 个 手指 从 屏幕 上 移 开 时 。 

对 于 不 同 浏览 器 也 有 作用 类 型 相同 但 是 事件 命名 不 一 样 的 事件 响应 ,具体 可 查阅 不 
同 浏览 器 下 支持 的 事件 类 型 。 
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10.4.2 方向 事件 


用 过 安 车 手机 或 苹果 手机 就 能 够 知道 ,手机 上 有 重力 感应 的 功能 ,并 且 很 多 软件 都 
基于 这 个 功能 来 设计 一 些 应 用 ,包括 指南 针 或 其 他 一 些 有 趣 的 功能 。 而 目前 浏览 器 中 也 
为 手机 的 重力 感应 添加 了 事件 响应 。 

设备 在 三 维 空间 中 可 以 看 成 由 三 个 方向 来 定位 的 , 即 xy 和 z 轴 。 这 三 条 轴 以 手机 
的 屏幕 来 确定 , 即 人 在 面向 着 屏幕 时 ,z 轴 正 向 从 前 往 后 ,x 轴 正 向 从 左 往 右 ,y 轴 正 向 从 
下 往 上 。 

需要 添加 设备 方向 变化 的 事件 响应 时 ,可 以 利用 事件 类 型 “deviceorientation ”来 添加 

window. addEventListener( " deviceorientation"，fun(e) {}); 

事件 响应 时 同样 也 会 向 响应 函数 中 传人 一 个 事件 对 象 ,对 于 该 事件 的 事件 对 象 , 共 
有 3 个 属性 ,其 中 alpha 属性 表示 围绕 z 轴 旋 转 的 度数 差 ,beta 属性 表示 围绕 x 轴 旋 转 的 
度数 差 ,gamma 表示 围绕 y 轴 旋 转 的 度数 差 。 

另外 还 有 一 个 " devicemotion" 事 件 ,该 事件 表示 的 是 设备 什么 时 候 在 移动 ,并 且 移动 
的 方向 是 在 哪 边 。 因 此 可 以 利用 这 个 事件 追踪 手机 移动 过 的 路 径 , 检 测 手机 是 否 在 摇动 
或 其 他 的 手机 动作 。 

添加 方式 一 样 , 如 下 。 

window. addEventListener( " devicemotion"，fun(e) {}); 

其 中 较 常 用 的 属性 有 acceleration 属性 ,表示 不 考虑 重力 加 速度 的 情况 下 ,各 方向 上 
的 重力 加 速度 。 


10.5 小结 


这 一 章 中 主要 介绍 了 动画 的 产生 方式 ,其 中 讲述 了 通过 改变 变换 矩阵 而 产生 的 动画 
和 精灵 动画 。 每 一 帧 改变 绘图 时 的 变换 矩阵 并 重 绘图 像 ,使 得 图 像 产生 平移 旋转 或 者 
缩放 的 动画 。 而 精灵 动画 就 是 利用 一 组 动画 帧 ,依次 播放 不 同 帧 中 的 图 像 , 以 完成 更 加 
复杂 的 动画 显示 。 

为 了 提高 动画 游戏 演 染 效果 ,给 出 了 预演 染 及 多 层面 布 技术 ,另外 还 介绍 了 网 页 中 
的 交互 操作 ,PC 设备 上 包括 鼠标 和 键盘 的 响应 ,而 移动 设备 上 就 包括 设备 方向 感应 和 触 
摸 手 势 。 利 用 好 不 同 平台 上 的 交互 操作 方式 ,可 以 使 动画 或 游戏 具有 跨 平 台 性 ,并 且 有 
更 好 的 交互 效果 。 
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10.6 习题 


1. 若 要 一 个 函数 每 秒 60 次 地 重复 执行 ,以 下 语句 正确 的 是 : (fun 是 函数 对 象 ) 
A. setInterval( fun, 60) 

B. setInterval(fun, 1 / 60) 

C. setInterval( fun, 0.6) 

D. setInterval( fun, 1000 / 60) 

2. 以 下 事件 类 型 中 ,不 属于 鼠标 事件 的 是 : 
A. mousedown 

B. mousemove 

C. mousedrag 

D. mouseup 

3. 以 下 有 关 事 件 类 型 keydown 和 keypress 的 说 法 中 ,错误 的 是 : 

A. keydown 能 响应 系统 功能 键 ,keypress 不 能 

B. keydown 和 keypress 能 可 以 响应 字符 键 

C. keydown 对 字符 键 大 小 写 不 敏感 

D. 按 下 字符 键 时 只 能 响应 keydown 和 keypress 其 中 一 个 事件 ,不 能 同时 响应 
4. 按 下 “shift + A”" 键 时 ,keydown 事件 中 的 属性 keyCode 的 值 是 : 

A.65 

B.97 

CA 

D. 
本 
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a 
根据 平移 动画 的 产生 原理 ,编写 程序 ,做 一 个 图 像 放大 缩小 的 动画 。 
尝试 编写 程序 ,使 画布 上 的 鱼 图 像 自 动 移动 到 鼠标 按 下 的 位 置 。 
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第 11 章 HIMLS 动画 设计 


本 章 中 涉及 3 个 动画 设计 例 程 。 其 中 先 以 鱼 游 动 的 例 程 来 逐步 介绍 一 个 简单 的 动 
画 组 成 步 又 ,并 且 分 别 列 出 使 用 面向 过 程 和 面向 对 象 的 编程 方法 ,让 读者 可 以 更 清楚 地 
了 解 面向 对 象 编程 的 特点 与 方便 之 处 。 

最 后 ,分别 介 绍 了 一 个 简单 的 广告 例 程 和 动画 演示 例 程 ,从 不 同方 面 演示 了 利用 
HTML5 夯 布设 计 动 画 的 技术 。 


11.1 备 游 动 动画 设计 


11.1.1 精灵 作 平 移动 画 


上 一 章 中 介绍 到 了 setInterval( ) 函数 的 应 用 和 比较 简单 的 平移 动画 和 精灵 动画 ,本 
节 介 绍 将 要 把 这 两 种 动画 结合 在 一 起 ,做 一 个 鱼 游 动 的 动画 。 
最 终 效果 如 图 11 -1 所 示 。 


图 11 -1 鱼 游 动 动画 
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下 面 给 出 实现 如 代码 清单 11 -1 所 示 。 
代码 清单 ”11 -1 


var context = canvas. getContext("2d"); 
var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 
var image = new Image(); 
var background = new Image(); 
background. src =“" 海 底 . png"; 
image. src =“" 鱼 动画 . png"; 
image. onload = function () { 
var frm = 0, dis = 0; 
varx = -200, y = 150; 
setInterval( function( ) { 
context. clearRect(0, 0, 800, 374); 
context. drawlmage( background, 0, 0); 
context. save( ); 
context. translate( x, y); 
context. drawlmage( image, 0, frm * 148, 201, 148, 0, 0, 201, 148); 
context. restore( ); 
XxX+=2; 
if (x > = 800) { 


} 
dis++; 
if (dis > = 20) { 
dis = 0; 
frm + +; 
if (frm > = 4) frm = 0; 
} 
}, 1000 / 60); 


画布 大 小 设置 为 宽度 800 像素 ,高度 374 像素 ,以 符合 海底 背景 图 的 大 小 。 
需要 改变 的 代码 不 多 ,在 每 次 控 除 画布 后 , 先 要 绘制 海底 背景 ,要 注意 的 是 绘制 顺 
序 ,默认 情况 下 , 先 绘制 的 图 像 会 被 后 绘制 的 图 像 覆盖 ,所 以 先 把 海底 背景 绘制 到 画 
布 上 。 
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通过 平移 画布 来 确定 鱼 的 绘制 位 置 ,因此 鱼 的 起 始 位 置 为 ( -200,150) ,之 后 每 一 由 
把 横 坐 标 x 自 增 2 ,使 得 鱼水 平 往 右 移 动 。 同 时 加 入 站 判断 语句 , 当 鱼 游 过 画布 右 端 时 重 
置 在 画布 最 左 端 
而 且 用 到 了 分 制 动 画 , 所 以 每 隔 一 段 时间 需 要 更 新 动画 帧 。 由 于 现在 是 以 1000 / 60 
的 时 间 间 隔 重 绘画 布 , 即 每 秒 60 帧 的 速度 重 绘 。 如 果 每 帧 都 更 换 动画 帧 的 话 ,那么 显示 
效果 太 快 以 至 于 看 不 清楚 。 所 以 定义 一 个 值 来 保存 更 换 动画 帧 的 间隔 帧 数 , 同时 定义 一 
个 全 局 变量 dis, 每 一 帧 都 自 增 ,并且 通 过 if 判断 语句 ,判断 每 过 20 帧 才 更 换 鱼 的 动画 
帧 并 将 dis 重 置 为 0, 相 当 于 一 个 计时 器 的 存在 。 


11.1.2 添加 上 下 移动 动作 


如 果 不 满意 鱼 游 动 只 是 单调 地 做 水 平移 动 ,那么 可 以 添加 一 些 运 算 来 增加 鱼 游 动 时 
出 现 的 时 而 上 时 而 下 游 动 动作 。 

只 需 在 每 次 更 新 坐标 时 ,为 纵 坐 标 y 添加 一 条 正弦 函数 计算 

y = 150 + 50 * Math. sin( Math. Pl / 100 * x); 

这 条 计算 式 根据 横 坐 标 x 的 位 置 计算 出 上 下 的 偏 移 量 Math. sin( Math. PI / 100 * 
x) ,系数 值 50 代表 偏 移 的 幅度 ,150 表示 正弦 曲线 上 的 平均 高 度 。 鱼 游 动 的 动作 变 成 波 
纹 状 ,完整 例子 如 代码 清单 11 -2 所 示 。 

代码 清单 ”11 -2 


var context = canvas. getContext("2d"); 
var image = new Image(); 
var background = new Image(); 
background. src = "海底 . png"; 
image. src =“" 鱼 动画 . png"; 
image. onload = function () { 
vari = 0, dis = 0; 
varx = -200, y = 150; 
setlnterval(function() { 
context. clearRect(0, 0, 800, 374); 
context. drawlmage( background, 0, 0); 
context. save( ); 
context. translate( x, y); 
context. drawlmage( image, 0, i * 148, 201, 148, 0, 0, 201, 148); 
context. restore( ); 


X+=2; 
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if (x > = 800) { 


} 
y = 150 + 50 * Math. sin(Math. PI/ 100 * x); 
dis + +; 
if (dis > = 20) { 
dis = 0; 
i++; 
ss 
} 
}, 1000 / 60); 


代码 清单 中 加 粗 的 一 行 代码 就 是 新 添加 的 代码 ,只 需 添 加 一 行 代码 , 鱼 游 动 的 动作 
就 变 得 更 加 生动 了 。 


11.1.3 面向 对 象 编程 实现 


假如 需要 在 例子 中 添加 多 条 鱼 游 动 , 每 条 鱼 的 位 置 不 同 ,并 且 分 割 动画 的 动画 帧 也 
不 相同 ,那么 现在 就 需要 用 多 个 变量 来 保存 不 同 鱼 的 位 置 和 动画 帧 数 。 可 想 而 知 ,代码 
就 会 变 得 非常 混乱 而 难以 维护 。 

不 妨 使 用 面向 对 象 的 方法 重 写 上 述 代码 ,这样 便 使 代码 整洁 .条理 清 晰 ,而 且 扩展 也 
方便 。 

可 以 把 鱼 看 成 是 一 个 对 象 Fish ,每 条 鱼 都 有 自己 的 位 置 .图 像 动画 帧 数 ,而 这 些 都 
可 以 作为 鱼 的 属性 , 鱼 不 断 往 前 游 动 的 动作 就 可 以 看 作 是 鱼 的 方法 。 既 然 属性 和 方法 都 
已 经 清楚 了 , 便 可 以 开始 编写 Fish 对 象 , 实 现 例子 如 代码 清单 11 -3 所 示 。 

代码 清单 ”11 -3 


var context = canvas. getContext("2d"); 
var Fish = function (image, x, y) { 

this. image = image; 

BX = 六 

this.y = y; 

this. averageY = y; 

this. frm = 0; 

this. dis = 0; 
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}; 
Fish. prototype. draw = function (ctx) { 
ctx. Save() ; 
ctx. translate(this. x, this. y) ; 
ctx. drawlmage(this. image, 0, this.i * 148, 201, 148, 0, 0, 201, 148); 
ctx. restore( ); 
this.x + = 2; 
if (this. x > = 800) { 
this. x = -200; 
} 
this.y = this. averageY + 50 * Math. sin( Math.PI/ 100 * this. x); 
this. dis + +; 
if (this. dis > = 20) { 
this. dis = 0; 
this. frm + +; 
if (this. frm > = 4) this. frm = 0; 


Fish 对 象 的 构造 函数 接收 3 个 参数 ,第 一 个 参数 image 表示 鱼 的 图 像 ; 后 两 个 参数 代 
表 鱼 的 起 始 位 置 x 和 y。 除 此 以 外 ,还 有 属性 averageY 保存 正弦 运动 时 的 水 平 高 度 ,frm 
表示 动画 帧 数 ,dis 表示 动画 帧 间 相 隔 的 帧 数 。 

Fish 对 象 还 有 一 个 绘制 方法 draw( ) ,这 个 方法 负责 控制 鱼 的 位 置 , 即 根据 起 始 位 置 
来 控制 鱼 做 游 动 的 位 置 和 更 换 动画 帧 。 方 法 中 的 代码 与 之 前 的 绘制 函数 差异 不 大 ,差别 
在 于 只 负责 绘制 鱼 本 身 的 图 像 ,没有 包括 擦 除 画 布 。 该 方法 接收 一 个 参数 ctx ,代表 的 是 
当前 画布 上 下 文 ,只 有 获取 上 下 文才 能 完成 图 像 的 绘制 。 

编写 完 Fish 对 象 的 时 候 ,新建 一 个 鱼 的 对 象 的 方法 如 下 。 

var fish = new Fish(image, x, y); 

只 要 向 构造 函数 中 传 入 相应 的 图 像 image 和 起 始 位 置 即 可 。 

需要 重 绘 鱼 图 像 的 时 候 ,只 需 调用 Fish 对 象 的 draw( ) 方法 并 传人 画布 的 上 下 文 对 
象 即 可 ,并 添加 多 条 鱼 在 海底 背景 上 ,实现 例子 如 代码 清单 11 -4 所 示 。 

代码 清单 ”11 -4 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 


var image = new Image(); 
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var background = new Image(); 


background. src =“" 海 底 . png"; 


image. src =“" 鱼 动画 . png"; 


image. onload 


}; 


function () { 

new Fish(image, —200, 20); 
var fish2 = new Fish(image, 20, 200); 
var fish3 = new Fish(image, 240, 50); 


var fish1 


var fish4 = new Fish(image, 480, 110); 
setInterval( function( ) { 
context. clearRect(0, 0, 800, 374); 
context. drawlmage( background, 0, 0); 
fish1. draw( context) ; 
fish2. draw( context) ; 
fish3. draw( context) ; 
fish4. draw( context) ; 
}, 1000 / 60); 


var Fish = function (image, x, y) { 


}; 
Fish. 


this. image = image; 
this.x = Xx; 

this.y = y; 

this. averageY = y; 
this. frm = 0; 

this. dis = 0; 


prototype. draw = function (ctx) { 

ctx. Save() ; 

ctx. translate( this. x, this. y) ; 

ctx. drawlmage( this. image, 0, this. frm * 148, 201, 148, 0, 0, 201, 148); 


ctx. restore() ; 


this.x + = 2; 

if (this.x > = 800) { 
this. x = -200; 

} 


this.y = this. averageY + 50 * Math. sin( Math. Pl/ 100 * this. x); 


this. dis + +; 
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i (this.dis > = 20) { 
this. dis = 0; 
this. frm + +; 


if (this. frm > = 4) this. frm = 0; 


现在 ,在 setInterval( ) 函数 中 ,只 负责 撤除 画布 并 重 绘 背 景 图 ,然后 鱼 图 像 的 绘制 就 
交 给 Fish 对 象 内 部 来 负责 处 理 ,如 果 想 要 修改 鱼 的 游 动 动作 ,只 需要 修改 Fish 对 象 的 代 
码 即 可 ,而 这 就 是 面向 对 象 编程 的 方便 之 处 ,效果 如 图 11 -2 所 示 。 


11 -2 和 鱼 游 动 动画 


11.1.4 修改 Fish 对 象 


由 于 Fish 对 象 内 部 用 到 了 分 割 动画 ,对 于 不 同 大 小 的 鱼 图 像 ,每 一 幅 动 画 帧 的 大 小 
也 就 有 所 不 同 ,所 以 当 增 加 其 他 鱼 图 像 的 时 候 , 需 要 修改 Fish 内 部 绘制 的 动画 帧 大 小 。 
因此 需要 为 Fish 对 象 增加 属性 width 和 height 来 保存 不 同 鱼 图 像 的 动画 帧 大 小 。 
另外 还 希望 鱼 游 动 的 时 候 每 隔 一 段 时 间 改 变 水 平移 动 的 速度 ,所 以 还 需要 添加 速度 
属性 velocity 和 控制 改变 速度 之 间 的 帧 数 disV。 下 面 是 新 修改 的 Fish 对 象 ,实现 如 代码 
清单 11 -5 所 示 。 
代码 清单 ”11 -5 


var Fish = function (image，x，y，width，height) { 
this. image = image; 
this.X = X; 
this.y = y; 
this. averageY = y; 
this. width = width; 
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this. height = height; 
this. frm = 0; 
this. dis = 0; 
this. velocity = 2; 
this. disV = 0; 
}; 
Fish. prototype. draw = function (ctx) { 
ctx. save( ); 
ctx. translate( this. x, this. y); 
ctx. drawlmage!( this. image, 0, this. frm * this. height, this. width, this. height, 0, 0, this. 
width, this. height) ; 
ctx. restore( ); 
this. x + = this. velocity; 
this. disV + +; 
if (this. disV > = 90) { 
this. velocity = 1 + 2 * Math.random(); 


上 
if (this. x > = 800) { 
this. x = -200; 
} 
this.y = this. averageY + 50 * Math. sin( Math. PI/ 100 * this. x); 
this. dis + +; 
if (this. dis > = 20) { 
this. dis = 0; 
this. frm + +; 
if (this. frm > = 4) this. frm = 0; 
} 


构造 函数 新 增加 两 个 参数 width 和 height ,用 来 确定 鱼 图 像 的 动画 帧 大 小 。 另 外 修改 
的 地 方 还 有 drawImage( ) 方 法 ,把 之 前 的 固定 数值 修改 为 绘制 对 应 鱼 图 像 的 大 小 。 
因为 需要 改变 鱼 的 游 动 速度 ,所 以 现在 鱼 的 横 坐 标 位 置 x 自 增 this. velocity 属性 值 ， 
而 属性 值 this. velocity 每 隔 90 帧 改变 一 次 ,如 下 。 
this. disV + +; 
i (this. disV > = 90) { 
this. velocity = 1 + 2 * Math.random(); 
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由 Math 对 象 的 random( ) 方 法 取得 随机 数 , 乘 以 一 个 数值 ,得 到 的 速度 范 上 上 
之 间 。 


而 新 创建 鱼 对 象 时 也 应 该 多 传人 宽度 和 高 度 , 如 下 。 


var fish = new Fish(image, x, y, width, height); 


下 面 增加 3 幅 不 同 的 鱼 图 像 , 实 现 如 代码 清单 11 -6 所 示 。 


代码 清单 ”11 -16 


目 是 1 一 3 


var context = 


Var canvas = 


var context = 


canvas. getContext( "2d"); 
document. getElementByld( " myCanvas" ); 


canvas. getContext( "2d"); 


var image = new Image(); 


var image2 = 


var image3 = 


var image4 = 


new Image(); 
new Image(); 


new Image(); 


var background = new Image(); 


background. src =“" 海 底 . png"; 


image.src = 


image2.src = 


image3. src = 


image4. src = 


" 鱼 动画 .png"; 


" 鱼 动画 2. png"; 
" 鱼 动画 3. png"; 
" 鱼 动画 4. png"; 


image4. onload = function () { 


}; 


var fish1 
var fish2 
var fish3 


var fish4 


= new Fish(image, -200, 20, 201, 148); 
= new Fish(image2, 20, 200, 200, 172); 
= new Fish(image3, 240, 50, 200，186); 
= new Fish(image4, 480, 110, 200, 170); 


setlnterval(function() { 
context. clearRect(0, 0, 800, 374); 


context. drawlmage( background, 0, 0); 


fish1 


. draw( context) ; 


fish2. draw( context) ; 


fish3. draw( context) ; 


fish4 


. draw( context) ; 


}, 1000 / 60); 


可 见 只 需 更 改 构造 函数 的 传人 参数 个 数 ,其 他 的 代码 都 不 用 改变 ,效果 如 图 11 -3 
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11 -3 ”和 鱼 游 动 动画 


11.1.5 添加 文字 


在 网 页 的 广告 设计 中 , 当然 也 少不了 文字 的 显示 。 下 面 就 利用 画布 上 下 文 的 方法 
fillText( ) 在 画布 中 央 添 加 文字 。 

不 妨 再 次 使 用 面向 对 象 编程 ,新 定义 一 个 对 象 ShowText ,包含 的 属性 有 显示 的 文本 
内 容 string ,显示 的 坐标 位 置 x 和 y。 如 果 还 希望 文字 能 够 延迟 一 段 时 间 才 显示 ,那么 同 
样 可 以 定义 一 个 属性 time 来 保存 延迟 的 帧 数 。 

除了 以 上 的 属性 ,ShowText 对 象 同 样 也 有 自己 的 绘制 方法 draw( ) ,这 个 方法 接收 一 
个 参数 , 即 画布 的 上 下 文 对 象 。 

确定 好 属性 和 方法 后 ,开始 编写 ShowText 对 象 ,实现 例子 如 代码 清单 11 -7 所 示 。 

代码 清单 ”11 -7 


var context = canvas. getContext("2d") 
var ShowText = function (string, x, y, time) { 
this. string = string; 
this.x = Xi; 
this.y = y; 
this.time = time; 
}; 
ShowText. prototype. draw = function (ctx) { 
if (this.time > = 0) { 
this. time - —; 
} else{ 
context. save( ); 


context. font = "50px Arial"; 


.2s 


人 
ET HTML 于 动 画 开 用 六 卫 教程 


context. fillText( this. string, this. x, this. y) ; 


context. restore() ; 


在 绘制 方法 draw( ) 中 , 先 判断 延迟 的 帧 数 ,如 果 延 迟 帧 数 大 于 0 ,那么 将 帧 数 自 减 1 。 
延迟 帧 数 已 经 倒数 完 , 便 开 始 绘制 文本 。 绘 制 方法 用 到 了 上 下 文 对 象 提供 的 filText( ) 方 
法 ,在 绘制 前 可 以 先 设置 文本 的 字体 大 小 和 字体 名 称 ,但 是 也 不 要 忘记 调用 save( ) 和 
restore( ) 方 法 。 

最 后 把 上 下 文 对 象 传 给 方法 draw( ) 就 可 以 实现 绘制 ,实现 例子 如 代码 清单 11 -8 
所 示 。 


代码 清单 ”11 -8 


var context = canvas. getContext("2d"); 

image4. onload = function () { 

var fish1 = new Fish(image, —200, 20, 201, 148); 

var fish2 = new Fish(image2, 20, 200, 200, 173); 

var fish3 = new Fish(image3, 240, 50, 200，186); 

var fish4 = new Fish(image4, 480, 110, 200, 170); 

var text = new ShowText( "欢迎 来 到 海底 世界 !"，200，200，120) ; 


setlnterval(function() { 
context. clearRect(0, 0, 800, 374); 
context. drawlmage( background, 0, 0); 
fish1. draw( context) ; 
fish2. draw( context) ; 
fish3. draw( context) ; 
fish4. draw( context) ; 
text. draw( context) ; 
}, 1000 / 60); 


由 于 其 余 代 码 都 相同 ,这 里 不 再 逐一 列 出 。 

上 述 代码 中 ,新 定义 一 个 变量 text 保存 ShowText 对 象 的 示例 ,再 在 回调 函数 中 调用 
text 的 draw( ) 方 法 。 

如 果 不 满足 于 简单 的 延 时 显现 效果 ,那么 可 以 稍微 把 ShowText 对 象 的 代码 修改 一 
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下 ,做 成 从 上 往 下 移动 进入 画布 。 实 现 如 代码 清单 11 -9 所 示 。 
代码 清单 ”11 -9 


var ShowText = function (string, x, y, time) { 
this. string = string; 
this. beginY = y - 300; 
this.x = x; 
this.y = y; 
this. time = time; 
}; 
ShowText. prototype. draw = function (ctx) { 
if (this. time > = 0) { 
this. time - —; 
} else{ 
context. save( ); 
context. font = "50px Arial"; 
context. translate( this. x, this. beginY) ; 
context. fillText( this. string, 0, 0); 


context. restore( ); 


if (this. beginY < = this.y) { 
this. beginY + = 2; 


新 的 ShowText 对 象 多 出 了 一 个 属性 beginY ,这 个 属性 保存 文本 落下 的 开始 位 置 ,而 
原本 的 属性 y 表示 最 终 位 置 ,可 见 beginY 的 初始 值 设置 为 y-300, 即 最 终 位 置 上 方 300 像 
素 的 位 置 为 落下 开始 位 置 。 

通过 translate( ) 方 法 来 确定 文本 的 位 置 ,不 过 也 可 以 把 位 置 传人 到 fillText( ) 方 法 中 ， 
效果 一 样 。 

最 后 加 入 让 判 断 语句 , 当 落 下 位 置 还 没 达 到 最 终 位 置 时 ,就 自 增 2。 也 即 往 下 移动 两 
个 像素 的 单位 ,所 以 呈现 出 落下 的 效果 。 

因为 没有 改变 构造 函数 的 传人 参数 ,所 以 其 余 代码 都 不 需要 修改 。 最 终 的 效果 如 
图 11 -4 所 示 。 
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图 11 -4 显示 落下 文字 


经 过 延迟 时 间 后 ,文字 会 从 画布 上 方 缓 缓 落下 。 
11.2 广告 动画 


现在 结合 上 述 章 节 中 讲述 的 知识 ,设计 一 个 在 网 页 中 经 常见 到 的 广告 动画 ,其 实 展 
现形 式 无 非 就 是 之 前 所 提 到 的 图 像 移动 和 文字 的 出 现 。 
“ 告 动 画 的 最 终 效 果 如 图 11 -5 所 示 。 
I 


图 11-5 广告 动画 


广告 中 的 动画 效果 有 

学 “广告 中 的 文字 按照 顺序 从 右 往 左 飞信 到 画布 之 中 。 

学 ”在 所 有 文字 都 飞人 到 画布 以 后 , 左 方 的 校徽 从 透明 渐 和 人 到 画布 中 。 

首先 来 实现 文字 从 右 往 左 的 飞 入 代码 ,代码 清单 如 代码 清单 11 - 10 所 示 。 
代码 清单 ”11 -10 


var ShowText = function (string, x, y, time) { 
this. string = string; 
this.X = X; 
this.y = y; 
this. beginX = x + 300; 
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this.time = time; 


}; 


ShowText. prototype. draw = function (ctx) { 


if (this.time > = 0) { 
this. time - —; 

} else { 
ctx. save( ); 


ctx. font = "40px Arial"; 


ctx. translate( this. beginX, this. y); 


ctx. lineWidth = 2; 


ctx. strokeText( this. string, 0, 0); 


ctx. filStyle = "white"; 


ctx. fillText( this. string, 0, 0); 


ctx. restore( ); 


if (this. beginX > = this. x) { 


this. beginX - = 20; 
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上 述 ShowText 对 象 与 上 一 节 中 的 同名 对 象 逻 辑 上 基本 一 致 ,只 不 过 这 一 次 不 是 从 上 


往 下 飞 入 ,而 是 从 右 往 左 飞 入 。 因 此 有 一 个 属性 beginX ,这 个 属性 值 是 最 终 位 置 往 右 300 
个 像素 的 距离 。 在 draw( ) 方 法 中 ,属性 每 帧 beginX 自 减 20 个 像素 的 单位 , 即 出 现 往 左 
移动 的 效果 。 


还 有 改变 的 就 是 绘制 文本 部 分 的 代码 。 用 黑色 线 宽 为 2 的 线 来 对 文字 进行 描 边 , 然 


后 再 用 白色 来 填充 文字 。 这 样 的 目的 是 让 每 个 文字 都 有 描 边 的 效果 ,使 得 文字 和 背景 容 
易 区 分 开 。 


如 让 每 个 文字 按 着 先后 顺序 出 现 ,只 需 设 置 每 个 文字 的 延迟 时 间 即 可 ,如 下 所 示 。 


var texts = []; 


texts. push( new ShowText( "博学 " 
texts. push( new ShowText( " 审问" 
texts. push( new ShowText(" 慎 思 " 
texts. push( new ShowText(" 明 辨 " 
texts. push( new ShowText(" 笃 行 " 


，270，100， 
，370，100， 
，470，100， 
，570，100， 
，670，100， 


30)); 
40)); 
50)); 
60)); 
70)); 


texts. push( new ShowText(" 中 山大 学 欢迎 您 来 报 读 "，300, 200，100) ) ; 
相 邻 文字 的 出 现时 间 间 隔 是 10 帧 ,这 样 看 起 来 便 是 文字 按照 顺序 出 现 。 
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接 下 来 就 要 实现 校徽 从 透明 渐 和 人 的 效果 , 先 给 出 实现 例子 如 代码 清单 11 - 11 所 示 。 

代码 清 11-11 


var Showlmage = function (image, x, y, time) { 
this. image = image; 
thie.X 二 Xi 
this.y = y; 
this.time = time; 
this. alpha = 0; 
}; 
Showlmage. prototype. draw = function (ctx) { 
if (this. time > = 0) { 
this. time - —; 
} else { 
ctx. save( ); 
ctx. globalAlpha = this. alpha; 
ctx. drawlmage(this. image, this. x, this. y); 
ctx. restore( ); 
if (this. alpha < = 1) { 
this. alpha + = 0.03; 


由 于 校徽 的 出 现 位 置 是 固定 的 ,所 以 只 需要 属性 x 和 y 来 保存 校徽 的 位 置 即 可 。 不 
过 多 出 了 属性 alpha 表示 校徽 的 透明 度 ,初始 化 为 0 代表 完全 透明 。 

ShowImage 对 象 同样 有 一 个 draw( ) 的 方法 ,其 中 也 是 先 递减 延迟 出 现 的 时 间 , 然 后 
再 把 校徽 绘制 出 来 。 在 第 8 章 中 提 到 过 画布 上 下 文 对 象 有 一 个 属性 globalAlpha 来 表示 
透明 ,因此 把 校徽 的 透明 度 赋值 给 上 下 文 对 象 后 再 来 绘图 ,这 样 就 可 以 控制 校徽 图 像 的 
透明 度 了 。 并 且 每 次 绘制 后 递增 透明 度 ,其 效果 是 校徽 图 像 从 透明 逐渐 到 清晰 为 止 。 

完成 了 以 上 两 个 对 象 以 后 ,再 利用 setInterval( ) 函数 来 重复 绘制 画布 即 可 ,下 面 给 出 
余下 代码 ,如 代码 清单 11 - 12 所 示 ,完整 代码 在 源 代码 文件 中 。 

代码 清单 ”11 -12 


var canvas = document. getElementByld("myCanvas"); 
var context = canvas. getContext("2d"); 
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var ShowText = function() {...}; 


var Showlmage = function() {...}; 


var image = new Image(); 

image. src = "sysu. png"; 

var background = new Image(); 

background. src = "sysubg. jpg"; 

background. onload = function () { 
var texts = []; 
texts. push( new ShowText( "博学 "，270，100,，30) ) ; 
texts. push( new ShowText( "审问 "，370，100,，40) ) ; 
texts. push( new ShowText(" 慎 思 ”"，470，100，50) ) ; 
texts. push( new ShowText(" 明 辨 "，570，100，60) ) ; 
texts. push( new ShowText(" 笃 行 "，670，100,，70) ) ; 
texts. push( new ShowText( " 中 山大 学 欢迎 您 来 报 读 "，300,，200，100) ) ; 


var SySu = new Showlmagel(image, 20, 20，100) ; 
setlnterval(function() { 

context. clearRect(0，0，770，300) ; 

context. drawlmage(background，0, 0) ; 

for (vari = 0; i < texts. length; i++){ 

texts[ i] . draw( context) ; 

} 

Sysu. draw( context) ; 
}, 1000 / 60); 


11.3 ”参数 约束 的 动 通 实 例 一 一 曲 森 滑 读 结 冤 


11.3.1 什么 是 曲柄 滑 块 结构 


若 动画 组 成 元 素 的 构件 有 约束 关系 ,是 通过 参数 的 调整 反映 出 来 的 ,参数 的 任何 改 
动 都 可 以 自动 在 动画 其 他 关联 的 元 素 中 反映 出 来 , 则 这 一 类 型 的 动画 可 称 之 为 参数 约束 
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动画 。 
所 谓 曲 柄 滑 块 结构 是 指 利 用 曲柄 和 滑 块 来 实现 转动 和 移动 相互 转换 的 结构 。 滑 块 
结构 中 与 机 架构 成 移动 副 的 构建 为 滑 块 ,通过 转动 副 A\B 链 结 曲柄 和 滑 块 的 构件 为 连 
杆 。 由 于 各 个 元 素 的 几何 关系 已 经 由 曲柄 的 短 臂 与 长 臂 长 度 参 数 所 确定 ,因而 曲柄 滑 块 
是 一 种 较为 典型 的 参数 约束 结构 ,如 图 11 -6 所 示 。 
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11 -6 曲柄 滑 块 结构 


鉴于 这 种 结构 广泛 应 用 于 往复 活塞 式 发 动机 、 压 缩 机 冲床 等 的 主 结构 中 ,在 这 一 节 
不 妨 利用 HTMLS 的 Canvas ,尝试 制作 一 幅 简单 的 曲柄 滑 块 结构 的 矢量 动画 。 


11.3.2 曲柄 滑 块 结构 动画 设计 思路 


从 图 11 -6 中 不 难 发 现 , 完 成 该 结构 静态 画面 的 绘制 , 仅 需 画 出 直线 、 圆 以 及 矩形 等 
基本 图 形 ,对 此 利用 Canvas 相应 的 lineTo( ) rect( ) 以 及 are( ) 函数 方法 并 不 难 实现 。 参 
照 图 11 -6 ,需要 

(1) 给 定 A 点 在 画布 的 坐标 ,利用 A 点 位 置 来 确定 滑 块 以 及 曲柄 旋转 中 心 的 位 置 。 

(2) 设 定 短 柄 的 长 度 , 即 曲柄 断 臂 旋转 圆 半 径 , 并 利用 lineTo( ) 函数 绘制 曲柄 的 
短 臂 。 

(3) 设 曲柄 长 臂 的 长 度 为 工 , 短 辟 末端 坐标 为 (xl ,yl) ,长 臂 末 端 坐标 为 (x2,y2), 则 
利用 勾 股 定理 有 

P= (x x) + (yy) 
考虑 到 y，。> 六 ,于 是 有 
y2 = WP- (x — x) + 
在 给 定 曲柄 长 臂 的 长 度 参数 后 ,利用 上 述 关 系 即 可 求 得 曲柄 长 臂 末端 ( 滑 块 连接 点 ) 
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的 位 置 坐 标 , 进 而 利用 lineTo( ) 以 及 rect( ) 函数 绘制 曲柄 长 臂 以 及 滑 块 。 

(4) 绘 制 滑 块 两 边 的 限制 墙壁 ,考虑 到 线条 重合 问题 ,可 以 人 为 地 在 墙壁 与 滑 块 之 间 
加 入 适当 的 缝隙 。 

绘制 出 的 静态 画面 如 图 11 -7 所 示 。 


图 11 -7 曲柄 滑 块 结构 的 静态 帧 


完成 静态 帧 的 绘制 之 后 ,需要 让 画面 动 起 来 ,于 是 需 设 定 曲柄 短 臂 的 旋转 速度 。 由 
前 面 的 动画 章节 介绍 可 知 , 人 眼中 图 片 的 连续 动 面 ,实际 就 是 静态 帧 快速 重生 呈现。 因 
此 setInteval( ) 函数 中 的 延迟 执行 时 间 是 影响 旋转 快慢 的 一 个 因素 ; 而 另 一 因素 则 是 相 
邻 静态 帧 间 短 臂 角 度 变化 增值 。 也 就 是 说 ,setInterval( ) 间隔 执行 时 间 越 短 , 帧 间 短 臂 的 
角度 变化 增值 越 大 , 则 动画 中 曲柄 旋转 、 滑 块 移动 就 越 快 。 

为 了 读者 熟悉 CVIDrawJS 引擎 绘图 部 分 ,不 利用 画布 相应 的 lineTo( ), rect( ) 以 及 
arc( ) 函数 ,直接 使 用 第 九 章 介 绍 的 CVICVIDrawJS 引擎 的 绘图 API 函数 绘制 这 一 结构 。 

综合 上 面 所 需要 的 各 种 参数 ,构建 如 代码 清单 11 -13 所 示 曲 柄 滑 块 结构 的 Slider( ) 
对 象 。 

代码 清单 ”11 -13 


function Slider ( point, radius, length, size, angle, angleRate) { 
this. beginPoint = point; 
this. radius = radius; 
this. length = length; 
this. size = size; 
this. angle = angle; 


this. angleRate = angleRate; 


属性 beginPoint 即 给 定 的 旋转 中 心 A 点 ,属性 radius 是 短 臂 也 即 旋转 半径 长 度 , 属 性 
length 是 曲柄 长 臂 长 度 , 属 性 size 是 滑 块 的 尺寸 大 小 ,属性 angle 和 angleRate 分 别 是 当前 
旋转 的 角度 和 每 帧 增加 的 角度 大 小 。 
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11.3.3 静态 帧 的 绘制 


静态 帧 的 绘制 并 不 复杂 ,只 需 注意 静态 画面 各 元 素 的 几何 关系 即 可 ,构建 的 静态 帧 
绘制 函数 drawSlider( ) 的 代码 如 代码 清单 11 - 14 所 示 。 
代码 清 11 -14 


function drawSlider( slider) { 

var point = slider. beginPoint; 

var radius = slider. radius; 

var width = slider. size. width; 

var height = slider. size. height; 

var length = slider. length; 

var angle = slider. angle; 

var graph = new CVIGraph(); 

// 确 定 短 臂 末端 

var point1 = cvi. p(0, 0); 

point1.x = point.x + radius * Math. cos(angle) ; 

point1.y = point.y + radius * Math. sin(angle); 

// 确 定 长 臂 末 端 

var point2 = cvi. p(0, 0); 

point2.x = point. x; 

var dis = cvi.pSub(point1，point2); 

point2.y = Math. sqrt(length * length - dis.x * dis.x) + point1.y; 

// 绘 制 短 臂 和 长 臂 

graph.lineTo([ point，point1，point2] ) ; 

// 把 全 局 线条 颜色 设置 为 黑色 

graph. gLineStyle( cvi. c3b(0, 0, 0)); 

// 绘 制 滑 块 

graph. rect( cvi. rect( point2. x - width / 2，point2. y，width，height) ) ; 

// 绘 制 滑 块 左 侧 墙壁 

graph. rect( cvi. rect( point2. x - width, length + point.y - radius, width /2 - 2, height + 
radius * 2)); 

// 绘 制 滑 块 右 侧 墙壁 

graph. rect( cvi. rect(point2.x + width /2 + 2, length + point.y - radius, width / 2 -2， 
height + radius * 2)); 

graph. gLineStyle( cvi. c3b(255, 0, 0) ); // 把 全 局 线条 颜色 设置 为 红色 
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graph. arc( point，radius + 10, 0，360); /旋转 结构 曲柄 

graph. arc( point1, 10, 0, 360); 

graph. draw( context) ; // 传 人 画布 上 下 文 绘制 图 像 

slider. angle + = slider. angleRate; // 每 帧 递增 角度 使 曲柄 不 断 旋转 


11.3.4 完整 动画 


为 了 得 到 一 幅 动态 的 画面 ,只 需 间 隔 的 控 除 画布 ,并 在 画布 上 绘制 下 一 静态 帧 。 由 
此 ,不 难得 到 完整 代码 如 代码 清单 11 - 15 所 示 。 
代码 清单 ”11 -15 


<!DOCTYPE HTML > 
<HTML > 
<head > 
<title > 曲柄 滑 块 结构 动画 < /title > 
<meta charset = "utf -8" > 
</head > 
<body > 
<canvas id = "myCanvas" width ="400" height ="300" style = "border' solid" > 
你 的 浏览 器 不 支持 canvas 画布 元 素 , 请 更 新 浏览 器 获得 演示 效果 . 
</canvas > 
< Script type = " text/javascript" src =" Color.js" > </script > 
< Script type = " text/javascript" src = " geometry/Bezier.js" > </script > 
< Script type = " text/javascript" src =" geometry/Geometry.js" > </script > 
< Script type =" text/javascript" src =" geometry/ Point. js”> </script > 
< Script type = "text/javascript”src = " geometry/ Rectangle.js” > </script > 
< Script type = " text/javascript" src = "geometry/ Size.js" > </script > 
< Script type =" text/javascript" src ="shape/CVIShapeBase.js" > </script > 
< Script type =" text/javascript" src ="shape/CVIGraph. js" > </script > 
< Script type =" text/javascript" > 
var canvas = document. getElementByld("myCanvas"); 


var context = canvas. getContext("2d"); 


function Slider ( point, radius, length, size, angle, angleRate) { 


this. beginPoint = point; 
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， 


this. radius = radius; 
this. length = length; 
this. size = size; 

this. angle = angle; 


this. angleRate = angleRate; 


function drawSlider( slider) { 


} 


var point = slider. beginPoint; 

var radius = slider. radius; 

var width = slider. size. width; 

var height = slider. size. height; 

var length = slider. length; 

var angle = slider. angle; 

var graph = new CVIGraph() ; 

var point! = cvi. p(0, 0); 

point1.x = point.x + radius * Math. cos(angle); 

point1.y = point.y + radius * Math. sin(angle); 

var point2 = cvi. p(0, 0); 

point2. x = point. x; 

var dis = cvi. pSub!( point1, point2); 

point2.y = Math. sqrt(length * length - dis.x * dis.x) + point1.y; 
graph.lineTo([ point，point1，point2] ) ; 

graph. gLineStyle( cvi. c3b(0, 0, 0)); 

graph. rect( cvi. rect( point2. x - width / 2, point2.y, width, height)); 
graph. rect( cvi. rect( point2. x - width, length + point.y - radius, width /2 - 2, 
height + radius * 2)); 

graph. rect( cvi. rect( point2. x + width /2 + 2, length + point.y - radius, width / 
2 - 2, height + radius * 2)); 

graph. gLineStyle( cvi. c3b(255, 0, 0)); 

graph. arc( point, radius + 10, 0, 360); 

graph. arc( point1, 10, 0, 360); 

graph. draw( context) ; 


Slider. angle + = slider. angleRate; 


var slider = new Slider( cvi. p(200, 50), 30, 100, cvi. size(20, 30), Math. Pl / 4, Math. 
Pl/ 30); 


setlnterval(function () { 
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context. clearRect(0, 0, 400, 300); 
drawSlider( slider) ; 
},50); 
</script > 
</body > 
</HTML > 


若 需 改变 曲柄 的 转动 速度 位 置 等 参数 ,只 需 对 构造 函数 Slider 里 的 各 参数 进行 调整 
即 可 。 动画 部 分 截图 如 图 11 -8 所 示 。 
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11.4 小结 


11 -8 曲柄 滑 块 动画 效果 图 


本 章 在 鱼 游 动 动画 中 ,介绍 了 鱼 的 平移 动画 、 鱼 的 精灵 动画 和 文字 弹出 动画 ,也 就 是 
一 个 简单 的 广告 所 应 具备 的 基本 要 素 。 并 且 在 例 程 中 使 用 了 两 种 编程 方法 ,从 而 让 初次 
接触 面向 对 象 的 读者 更 加 容易 地 了 解 到 面向 对 象 编程 的 方便 之 处 。 

之 后 ,本 章 还 展示 了 一 个 简单 且 完整 的 广告 动画 ,包含 文字 落下 动画 和 图 像 渐 变 呈 
现 动画 ,利用 面向 对 象 编程 可 以 简单 地 编写 出 来 。 最 后 则 是 演示 了 参数 约束 的 曲柄 滑 块 
结构 动画 的 设计 过 程 。 
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11.5 习题 


1. 修改 本 章鱼 游 动 的 动画 代码 ,将 鱼 游 动 设置 在 水 面 以 下 。 

2. 参考 本 章鱼 游 动 的 动画 代码 ,尝试 对 水 中 鱼 的 数目 进行 增加 ;如 果 要 增加 大 量 的 
鱼 , 请 改写 鱼 游 动 代码 。 

3. 设计 一 个 汽车 在 公路 上 行驶 的 动画 ,要 求 在 动画 中 可 以 看 到 车 轮转 动 以 及 汽车 整 
体 的 移动 。 

4. 选择 “请 勿 醉 驾 ”"“ 请 勿 践踏 草坪 "“ 吸 烟 有 害 健 康 ”“ 环 境 保护 ”之 一 作为 主 
题 ,设计 一 则 公益 广告 。 并 使 用 所 学 的 方法 ,将 其 制作 成 HTMLS 动画 。 
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第 12 童 HTMLS 休闲 游戏 设计 


本 章 将 利用 第 10 章 预 备 知识 中 的 鼠标 响应 作为 基础 来 设计 一 个 休闲 小 游戏 。 本 章 
是 先 在 一 个 简单 动画 的 基础 上 ,添加 鼠标 响应 和 简单 的 碰撞 检测 ,从 而 实现 捕捉 鱼 的 动 
画 , 随 后 逐一 向 该 动画 游戏 中 添加 功能 ,一 步 步 完 善 整个 休闲 游戏 的 功能 ,演示 了 简单 休 
闲 游戏 设计 的 全 过 程 。 


12.1 游戏 策划 


在 着 手 编写 代码 之 前 ,一 般 来 说 先 要 确定 将 要 制作 的 游戏 的 原型 ,也 即 是 确定 游戏 
的 类 型 .具体 的 交互 操作 玩法 等 。 

本 章 中 将 要 在 上 一 章鱼 游 动 面 的 基础 上 ,加 入 一 些 捕 鱼 的 操作 , 即 利用 鼠标 点 击 中 
鱼 儿 并 拖 动 到 篮子 上 来 进行 捕获 。 另 外 可 以 根据 鱼 儿 的 体积 大 小 计算 得 分 ,体积 越 小 的 
鱼 越 难点 击 中 ,所 以 得 分 相对 较 高 。 最 后 当 所 有 的 鱼 儿 都 捕捉 完 , 就 提示 游戏 结束 。 

当 确 定 下 总 体 的 游戏 流程 后 ,下 一 步 需 要 把 流程 中 的 细节 想 清楚 ,这 样 会 使 得 后 续 
的 编程 工作 更 加 清晰 方便 。 可 以 分 为 几 个 不 同 的 设计 细节 。 

细节 一 ,根据 上 一 章 的 动画 内 容 , 需 要 在 每 帧 中 更 新 画布 ,并 在 画布 上 绘制 样式 不 同 
和 体积 不 同 的 鱼 儿 。 为 了 增添 难度 , 令 鱼 沿 着 正弦 曲线 的 路 径 移 动 , 即 边 上 下 浮动 边 往 
右 游 动 。 

细节 二 , 当 玩家 用 鼠标 点 击 中 鱼 时 , 鱼 即 跟随 着 鼠标 , 直到 鼠标 松 开 后 鱼 儿 才能 自由 
游 动 。 鼠 标点 击 鱼 的 时 候 需 要 进行 碰撞 检测 , 即 检测 鼠标 点 击 位 置 是 否 在 鱼 的 包围 杠 
内 ,不同 大 小 的 鱼 的 包围 框 大 小 也 不 同 。 

细节 三 ,设置 一 个 篮子 收获 被 捕捉 的 鱼 。 鼠 标 松 开 时 ,检测 松 开 位置 是 否 在 篮子 上 ， 
如 果 是 ,那么 捕获 鱼 成 功 ,随即 鱼 儿 从 画布 上 消失 并 添加 捕获 分 数 。 和 否则 , 鱼 儿 重新 回 到 
画布 并 自由 游 动 。 计 算 分 数 需 要 检测 鱼 的 体积 大 小 ,并 根据 设 定 不 同 大 小 的 鱼 获取 
分 数 。 

细节 四 ,实时 显示 捕获 分 数 ,并 且 检 测 画 布 中 剩 下 的 鱼 数目 ,如 果 全 部 都 被 捕获 了 ， 
此 时 落下 游戏 结束 提示 语 。 

. 225 . 


缴 - HTML5 交 互动 画 开发 实践 教程 ”让 


12.2 碰撞 检测 


在 游戏 中 经 常 涉及 的 一 种 判定 就 是 碰撞 检测 ,例如 子弹 飞行 后 击 中 目标 ,桌球 相 碰 
而 弹 开 ,或 者 在 交互 中 检测 鼠标 是 否 点 中 图 像 等 。 
所 以 在 游戏 正式 开始 之 前 , 先 来 介绍 一 下 碰撞 检测 。 


12.2.1 碰撞 检测 类 型 


一 般 来 说 ,检测 两 个 对 象 是 否 发 生 碰撞 ,可 以 有 以 下 三 种 方法 。 

学 ”AABB 检测 

无 论 是 什么 图 形 , 粗 略 地 都 能 够 看 成 有 一 个 矩形 包围 框 在 外 部 ,这 个 矩形 包围 框 又 
称 作 Axis Aligned Bounding Box ,简称 AABB。 通 过 判断 包围 物体 的 AABB 的 重 释 状况 ,可 
以 粗略 检测 出 两 个 物体 是 否 产生 相交 。 如 果 两 个 包围 盒 没 有 发 生 重 三 ,那么 被 包围 的 物 
体 也 肯定 不 会 相交 ,由 此 可 用 AABB 框 近似 地 检测 碰撞 。 相 交情 况 如 图 12 -1 所 示 。 


12 -1 和 矩形 检测 示意 图 


如 果 确 定 两 个 图 像 的 矩形 包围 框 有 重 全 部 分 存在 ,那么 就 判定 为 两 个 图 像 发 生 碰 
撞 。 和 否则 就 判定 为 没有 发 生 碰撞 。 

这 种 碰撞 检测 方法 的 优点 是 算法 简单 .代码 量 少 .并且 简 单 易 懂 。 缺 点 就 是 :精确 度 
不 高 ,对 于 一 些 复杂 图 形 来 说 就 显得 过 于 粗略 。 

目前 对 于 一 些 精度 要 求 不 高 的 碰撞 检测 来 说 ,这 是 较 常用 的 方法 之 一 。 

党 ”中心 点 检测 

顾名思义 ,这 种 碰撞 检测 方法 就 是 利用 两 个 图 像 的 中 心 点 ,通过 计算 出 他 们 中 心 点 
之 间 的 距离 ,再 用 一 个 数值 做 比较 。 如 果 两 个 中 心 点 的 距离 小 于 这 个 数值 ,那么 判定 为 
这 两 个 图 像 发 生 碰撞 。 如 果 距 离 大 于 这 个 数值 ,那么 判定 为 没有 发 生 碰撞 。 示 意图 
如 图 12 -2 所 示 。 
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图 12 -2 中 心 点 检测 示意 图 


中 心 点 碰撞 检测 方法 的 优点 同样 是 :算法 简单 ,代码 量 少 。 缺 点 也 是 :精确 度 不 高 ， 
不 能 处 理 一 些 复杂 图 形 。 不 过 对 于 精度 要 求 不 高 的 场合 下 ,这 也 是 较 常 用 的 方法 之 一 。 

学 ”像素 检测 

对 于 一 些 复杂 图 形 的 碰撞 检测 ,例如 一 个 五 角 星 和 三 角形 的 碰撞 ,如 果 用 上 述 两 种 
方法 ,那么 碰撞 结果 就 难以 令 人 满意 了 。 为 了 符合 实际 的 碰撞 检测 ,可 以 用 此 方法 。 

像素 检测 方法 的 原理 在 于 :在 某 一 点 上 通过 把 两 个 图 像 的 颜色 相 加 ,如 果 在 这 一 点 
上 两 个 图 像 是 发 生 重生 的 ,那么 颜色 相 加 后 的 结果 再 减 去 源 图 像 的 颜色 就 不 为 0, 由 此 确 
定 两 幅 图 像 有 重合, 即 发 生 碰撞 。 示 意图 如 图 12 -3 所 示 。 


12 -3 ”像素 检测 示意 图 


像素 检测 方法 是 这 3 种 方法 中 精确 度 最 高 的 ,但 是 也 是 耗费 计算 资源 最 大 的 。 适 合 
一 些 精度 要 求 较 大 的 场合 。 

当然 还 有 许多 其 他 的 碰撞 检测 方法 ,每 种 方法 都 有 适合 使 用 的 场合 ,选择 一 种 适合 
的 碰撞 检测 对 于 提高 游戏 性 能 来 说 是 非常 重要 的 。 


12.2.2 碰撞 检测 与 鼠标 交互 


游戏 实例 需要 用 到 鼠标 与 图 像 的 交互 ,所 以 先 来 介绍 一 些 鼠 标 交互 的 方法 。 其 实 鼠 
标 交互 需要 做 的 工作 不 外 乎 就 是 碰撞 检测 ,只 不 过 这 时 候 碰撞 检测 的 对 象 是 图 像 与 一 个 
点 ,所 以 可 以 使 用 上 述 介绍 的 矩形 检测 和 中 心 点 检测 。 
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这 里 的 矩形 检测 不 再 是 判断 两 个 矩形 是 否 重 盔 , 而 是 要 判断 这 个 点 是 否 在 矩形 的 内 
部 ,由 此 确定 鼠标 是 否 点 击 了 图 像 。 
假设 图 像 的 绘制 位 置 为 (x,y) ,也 就 是 图 像 左 上 角 点 所 在 位 置 ,而 图 像 的 宽度 和 高 度 
分 别 为 width 和 height。 那 么 图 像 的 矩形 包围 框 的 范围 就 是 x 到 x + width 和 y 到 y + 
height。 所 以 判断 点 是 否 在 矩形 内 部 的 条 件 是 
x <= mouseX < = x + width 
y < = mouseY < = y + height 
只 有 满足 以 上 两 个 条 件 ,那么 点 就 在 矩形 内 部 。 
简单 测试 鼠标 点 击 事件 ,每 当 鼠 标 在 矩形 包围 框 内 点 击 鼠 标 , 即 在 调试 台中 输出 
“mouse clicked" 的 消息 ,实现 例子 如 代码 清单 12 -1 所 示 。 
代码 清单 ”12 -1 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 
canvas. addEventListener( " mousedown" , onMouseDown, false); 
var image = new Image(); 
image. src =" 鱼 .png"; 
var x = 20, y = 20; 
var width, height; 
image. onload = function () { 
width = image. width; 
height = image. height; 


context. drawlmage( image, x, y); 


function onMouseDown(e) { 
var mouseX = e.pageX - canvas. clientLeft; 


var mouseY = e.pageY - canvas. clientTop; 


var betweenX = (mouseX > = x) && (mouseX < = x + width); 
var betweenY = (mouseY > = y) && (mouseY < = y + height); 
i (betweenX && betweenY) { 


console. log( " mouse clicked " ) ; 


为 画布 添加 鼠标 响应 事件 " mousedown" ,并 且 传 入 响应 函数 onMouseDown。 在 函数 
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内 部 的 工作 是 获取 鼠标 点 击 的 位 置 ,其 中 鼠标 在 画布 上 的 点 击 位 置 是 用 鼠标 的 页 面 位 置 
减 去 画布 在 页 面 中 的 位 置 得 到 。 之 后 用 局 部 变量 betweenX 和 betweenY 来 表示 点 是 否 在 
和 抑 形 的 边框 内 部 ,如 果 确 定 了 点 在 矩形 内 部 ,那么 向 调试 台 输 出 “mouse clicked ”的 消息 ， 
否则 什么 也 不 做 。 

用 了 全 局 变量 x 和 y 保存 图 像 的 绘制 位 置 ,全 局 变量 width 和 height 保存 图 像 的 大 
小 。 其 中 Image 对 象 中 还 有 两 个 属性 width 和 height ,它们 保存 了 源 图 像 的 宽度 大 小 和 高 
度 大 小 ,所 以 利用 这 两 个 属性 可 以 获取 到 图 像 大 小 并 保存 到 全 局 变量 width 和 height 中 。 

运行 代码 ,分 别 在 图 像 以 外 的 画布 地 方 点 击 和 图 像 上 点 击 鼠 标 ,观察 调试 台 输 出 消 
息 。 可 见 在 矩形 包围 框 外 部 点 击 时 ,调试 台 没 有 消息 输出 。 而 在 图 像 上 方 点 击 鼠 标 时 ， 
调试 台 输 出 消息 "mouse clicked" ,由 于 矩形 检测 法 精确 度 低 ,所 以 点 击 和 矩形 包围 框 内 部 的 
空白 部 分 也 会 产生 输出 消息 。 


12.2.3 实现 拖 动 效 果 


要 实现 拖 动 效果 ,就 是 在 鼠标 点 击 图 像 后 ,图 像 随 着 鼠标 移动 , 而 鼠标 松 开 时 ,图 像 
就 停止 移动 。 
为 此 需要 一 个 变量 来 保存 鼠标 点 击 图 像 的 状态 ,并 且 用 变量 记录 鼠标 的 移动 距离 ， 
使 得 图 像 根据 这 个 位 移 来 移动 ,实现 例子 如 代码 清单 12 -2 所 示 。 
代码 清单 ”12 -2 


var canvas = document. getElementByld( "myCanvas " ) ; 

var context = canvas. getContext("2d" ) ; 

canvas. addEventListener( " mousedown" ，onMouseDown，false) ; 
canvas. addEventListener( "mousemove" ，onMouseMove，false) ; 


canvas. addEventListener( " mouseup", onMouseUp, false); 


var x = 20, y = 20; 
var width, height; 
var isClicked = false; 


var mouseX, mouseY, preX, preY; 


var image = new Image(); 

image. src =" 鱼 .png"; 

image. onload = function () { 
width = image. width; 
height = image. height; 


和 


HTML5 交 互动 画 开发 实践 
setlnterval(function () { 


context. clearRect(0, 0, 400, 200); 


context. save( ); 


context. translate( x, y); 
context. drawlmage( image, 0, 0); 
context. restore( ); 
}, 1000 / 60); 
}; 


function onMouseDown(e) { 


preX = mouseX = e.pageX - canvas. clientLeft; 


preY = mouseY = e.pageY 


canvas. clientTop; 


var betweenX = (mouseX > 


Xx) && (mouseX < = x + width); 


var betweenY = (mouseY > 
if (betweenX && betweenY) { 
isClicked = true; 


y) && (mouseY < = y + height) ; 


} 


function onMouseMove(e) { 
if (isClicked) { 
mouseX = e.pageX - canvas. clientLeft; 
mouseY = e.pageY - canvas. clientTop; 
x + = mouseX - preX; 
y + = mouseY - preY; 
preX = mouseX; 


preY = mouseY; 


} 
function onMouseUp(e) { 


isClicked = false; 


新 定义 了 全 局 变量 isClicked 来 保存 鼠标 点 击 图 像 的 状态 ,true 表示 鼠标 点 中 图 像 ， 
false 表示 鼠标 没有 点 中 图 像 。 这 个 变量 在 onMouseDown( ) 响应 函数 中 通过 判定 点 在 矩 
区 包围 框 内 部 后 赋值 为 true ,在 onMouseUp( ) 响应 函数 中 赋值 为 false。 

还 有 新 定义 的 变量 mouseX .mouseY .preX 和 preY .mouseX 和 mouseY 表示 当前 鼠标 
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的 位 置 ,preX 和 preY 表示 上 一 次 鼠标 的 位 置 ,因此 由 mouseX - preX 和 mouseY - preY 
得 到 鼠标 移动 过 程 中 的 位 移 。 

在 onMouseMove( ) 响应 函数 中 ,主要 是 负责 更 新 图 像 的 绘制 位 置 x 和 y。 函 数 内 部 
首先 更 新 当前 的 鼠标 位 置 ,再 减 去 上 一 次 鼠标 位 置 得 到 鼠标 位 置 ,为 绘制 位 置 x 和 y 加 上 
位 移 量 得 到 最 终 绘 制 位 置 。 最 后 更 新 preX 和 preY 的 数值 。 

由 于 这 一 次 鱼 的 绘制 位 置 是 动态 更 新 的 ,所 以 还 是 以 每 秒 60 帧 的 速度 擦 除 画 布 和 
重 绘 鱼 图 像 。 

运行 代码 ,将 鼠标 位 置 放 到 图 像 上 点 击 并 拖 动 , 即 可 拖 动 鱼 图 像 移动 。 

再 次 用 面向 对 象 编程 的 方法 把 上 述 代码 改写 ,Fish 对 象 的 属性 已 经 知道 了 有 image 
对 象 .绘图 位 置 x 和 y 宽度 width 和 高 度 height。 而 方法 就 有 自身 的 碰撞 检测 testPoint( ) 、 
移动 位 置 move( ) 和 绘图 函数 draw( ) 。Fish 对 象 的 实现 如 代码 清单 12 -3 所 示 。 

代码 清单 ”12 -3 


var Fish = function (image, x, y) { 
this. image = image; 
this.x = x; 
this.y = y; 
this. width = image. width; 
this. height = image. height; 
}; 
Fish. prototype. testPoint = function (x, y) { 
var betweenX = (x > = this.x) && (x < = this.x + this. width); 
var betweenY = (y > = this.y) && (y < = this.y + this. height) ; 
return betweenX && betweenY; 
}; 
Fish. prototype. move = function (dx, dy) { 
this.x + = dx; 


this.y + = dy; 

}; 

Fish. prototype. draw = function (ctx) { 
ctx. save( ); 
ctx. translate( this. x, this. y) ; 
ctx. drawlmage( this. image, 0, 0); 
ctx. restore() ; 

}; 


方法 testPoint( ) 接收 两 个 参数 ,表示 要 测试 的 点 ,如 果 这 个 点 在 矩形 包围 框 内 部 , 那 
么 这 个 方法 返回 true 值 ;否则 返回 false 值 。 
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方法 move( ) 接 收 两 个 参数 ,表示 位 移 的 距离 大 小 。 
方法 draw( ) 就 是 根据 绘制 位 置 x 和 y 绘制 图 像 。 其 余 修 改 代 码 的 实现 如 代码 清 
单 12 -4 所 示 。 
代码 清单 ”12 -4 


var fish; 
var isClicked = false; 
var mouseX, mouseY, preX, preY; 
var image = new Image(); 
image. src =“" 鱼 .png'"; 
image. onload = function () { 
fish = new Fish(image, 20, 20); 
setlnterval(function () { 
context. clearRect(0, 0, 400, 200); 
fish. draw( context) ; 
}, 1000 / 60); 
}; 


function onMouseDown(e) { 
preX = mouseX = e.pageX - canvas. clientLeft; 
preY = mouseY = e.pageY - canvas. clientTop; 


isClicked = fish. testPoint( mouseX, mouseY); 


function onMouseMove(e) { 
if (isClicked) { 
mouseX = e.pageX - canvas. clientLeft; 
mouseY = e.pageY - canvas. clientTop; 
fish. move(mouseX - preX, mouseY - preY); 
preX = mouseX; 
preY = mouseY; 


} 
function onMouseUp(e) { 
isClicked = false; 


要 修改 的 地 方 为 ,把 变量 isClicked 的 值 交 由 方法 testPoint( ) 来 进行 判断 。 而 移动 图 
像 的 任务 就 交 给 方法 fish. move( ) 来 控制 。 
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12.3 ” 捕 和 鱼 修 游 戏 设 计 


12.3.1 添加 拖 动 效果 


掌握 了 碰撞 检测 原理 以 后 ,可 以 开始 设计 一 个 捕 鱼 的 小 ot 这 个 小 游戏 的 设计 
目标 是 :有 鱼 在 画布 上 游 动 ,需要 用 鼠标 点 击 并 拖 放 在 指定 的 地 点 再 松 开 ,这 样 就 可 以 成 
功 捕获 到 鱼 。 

不 要 着 急 在 一 开始 就 把 所 有 功能 做 出 来 ,而 应 该 一 步 步 地 添加 功能 ,有 需要 时 再 作 
修改 ,所 以 下 面 先 把 拖 动 效果 放 在 上 一 章 中 鱼 游 动 动画 中 ,有 了 面向 对 象 编程 ,这 不 是 一 
件 困难 的 事情 ,Fish 对 象 的 实现 如 代码 清单 12 -5 所 示 。 

代码 清单 ”12 -5 


var Fish = function (image, x, y) { 
this. image = image; 
this.x = x; 
this.y = y; 
this. originX = x; 
this. originY = y; 
this. width = image. width; 
this. height = image. height / 4; 
this. isCaught = false; 
this. frm = 0; 
this. dis = 0; 


Fish. prototype. getCaught = function (bool) { 
this. isCaught = bool; 
if (bool = = false) { 
this. originX = 0; 
this. originY = this. y; 


}; 
Fish. prototype. testPoint = function (x, y) { 
var betweenX = (x > = this.x) && (x < = this.x + this. width); 
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var betweenY = (y > = this.y) && (y < = this.y + this. height) ; 
return betweenX && betweenY; 


}; 


Fish. prototype. move = function (dx, dy) { 


this.x + = dx; 


this.y + = dy; 


}; 


Fish. prototype. draw = function (ctx) { 


ctx. save( ); 


ctx. translate( this. x, this. y); 
ctx. drawlmage (this. image, 0, this. frm * this. height, this. width, this. height, 0, 0, this. 


ctx. restore( ) 


width，this. height) ; 


if (!this.isCaught) { 


this.x + = 2; 

this. originX + = 2; 

if (this.x > = 800) { 

this.x = -200; 

} 

this.y = this. originY + 50 * Math. sin( Math. Pl/ 100 * this. originX); 
} 
this. dis + +; 


if (this. dis > = 20) { 


this. dis 
this. frm 
if (this. f 


= 0; 
++; 


rm > = 4) this.frm = 0; 


Fish 对 象 中 的 属性 修改 不 多 ,其 中 属性 originX 和 originY 主要 是 保存 鱼 游 动 的 起 始 


位 置 ,用 于 记录 每 次 
移 画 布 使 鱼 绘制 到 


拖 动 结束 后 与 起 点 位 置 。 而 属性 x 和 y 就 保存 鱼 的 当前 位 置 ,用 于 平 
E 确 的 位 置 。 其 中 属性 height 是 图 像 高 度 的 四 分 之 一 ,原因 在 于 这 次 


使 用 的 是 有 四 幅 动 画 帧 的 图 像 ,因此 每 一 幅 动 画 帧 的 高 度 只 占 整 幅 图 像 的 四 分 之 一 。 


其 中 方法 draw( 


) 的 任务 是 负责 更 新 鱼 的 位 置 ,更 换 动 画 帧 和 绘制 任务 ,其 中 的 代码 


在 上 一 章 中 已 经 讲述 过 了 。 而 方法 testPoint( ) 和 move( ) 则 分 别 负责 做 碰撞 检测 和 移动 


鱼 的 位 置 ,可 以 参考 


上 一 节 的 代码 说 明 。 


新 Fish 对 象 的 里 面 添加 了 属性 isCaught 和 方法 getCaught( ) 。 这 个 getCaught( ) 方 法 
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接收 一 个 布尔 值 参数 ,表示 这 条 鱼 是 否 被 鼠标 捕获 了 ,并 且 把 值 赋 给 属性 isCaught。 而 且 
在 方法 中 也 多 加 了 一 个 站 判断 语句 ,用 来 判定 当 鼠 标 松 开 鱼 的 时 候 把 鱼 的 初始 位 置 更 新 
到 放下 的 位 置 ,当然 如 果 鼠 标 松 开 时 鱼 离开 了 水 面 (水 面 的 y 轴 坐 标 为 134) ,要 将 鱼 放 回 
水 中 。 

我 们 还 需要 在 方法 draw( ) 中 做 一 些小 更 改 ,通过 加 入 让 条 件 语句 ,判断 属性 isCaught 
的 值 来 更 新 鱼 的 绘制 位 置 。 因 为 当 鱼 没有 被 捕获 的 时 候 , 鱼 是 可 以 在 水 面 下 自由 游 动 
的 ,所 以 主语 句 成立 ,进入 到 括号 句 中 的 位 置 更 新 计算 ,并 且 同 时 在 计算 之 后 要 保证 鱼 在 
水 面 以 下 游 动 ,所 以 需要 再 对 鱼 的 y 坐标 进行 一 次 判断 ,如 果 y 值 超过 水 面 ,就 取 y 等 于 
水 面 的 高 度 。 一 旦 鱼 被 鼠标 捕获 ,那么 鱼 就 不 能 自己 更 新 位 置 了 ,所 以 此 时 我 们 就 不 会 
进入 让 语 句 中 。 

新 Fish 对 象 的 代码 写 好 以 后 ,还 需要 对 上 一 节 中 的 代码 作出 修改 ,修改 的 地 方 不 多 ， 
修改 部 分 实现 代码 如 代码 清单 12 -6 所 示 。 

代码 清单 ”12 -6 


var canvas = document. getElementByld(" myCanvas"); 
var context = canvas. getContext("2d"); 
canvas. addEventListener( " mousedown" , onMouseDown, false); 
canvas. addEventListener( " mousemove", onMouseMove, false); 
canvas. addEventListener( " mouseup", onMouseUp, false); 
var Fish = function (image, x, y) {...... } // 见 代码 清单 3 -5 
var fish1, fish2, fish3, fish4, caughtFish = null; 
var isClicked = false; 
var mouseX, mouseY, preX, preY; 
var image = new Image(); 
var image2 = new Image(); 
var image3 = new Image(); 
var image4 = new Image(); 
var background = new Image(); 
background. src =“" 海 底 . png"; 
image. src =“" 鱼 动画 . png"; 
image2. src =" 鱼 动画 2. png"; 
image3. src =" 鱼 动画 3. png"; 
image4. src =" 鱼 动画 4. png"; 
image4. onload = function () { 
fish1 = new Fish(image, -200, 200); 
fish2 = new Fish(image2, 20, 200); 
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fish3 = new Fish(image3, 240, 200); 
fish4 = new Fish(image4, 480, 200); 
setlnterval(function () { 

context. clearRect(0, 0, 800, 374); 
context. drawlmage( background, 0, 0); 
fish1. draw( context) ; 

fish2. draw( context) ; 

fish3. draw( context) ; 

fish4. draw( context) ; 

}, 1000 / 60); 
}; 


function onMouseDown(e) { 
preX = mouseX = e.pageX - canvas. clientLeft; 
preY = mouseY = e.pageY - canvas. clientTop; 
if (fish1. testPoint( mouseX，mouseY) ) { 
fish1. getCaught( true); 
caughtFish = fish1; 
isClicked = true; 
} else if (fish2. testPoint( mouseX, mouseY)) { 
fish2. getCaught( true); 
caughtFish = fish2; 
isClicked = true; 
} else if (fish3. testPoint( mouseX, mouseY)) { 
fish3. getCaught(true) ; 
caughtFish = fish3; 
isClicked = true; 
} else if (fish4. testPoint( mouseX, mouseY)) { 
fish4. getCaught( true); 
caughtFish = fish4; 
isClicked = true; 
} else{ 
isClicked = false; 


caughtFish = null; 


} 

} 

function onMouseMove(e) { 
if (isClicked) { 
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mouseX = e.pageX - canvas. clientLeft; 

mouseY = e.pageY - canvas. clientTop; 

caughtFish. move( mouseX — preX, mouseY - preY); 
preX = mouseX; 


preY = mouseY; 


} 
function onMouseUp(e) { 
isClicked = false; 
if (caughtFish ! = null) { 
caughtFish. getCaught( false) ; 
caughtFish = null; 


因为 打算 在 画布 上 添加 4 条 鱼 图 像 ,所 以 分 别 声明 了 4 个 全 局 变量 fishl ~4; 另 外 还 
有 一 个 变量 caughtFish ,表示 被 捕获 的 鱼 。 一 开始 没有 鱼 被 捕获 ,所 以 此 时 这 个 变量 的 值 
为 null。 

接 下 来 的 绘制 代码 都 与 上 一 章 的 一 样 ,不 再 重复 说 明 。 

之 后 在 响应 函数 onMouseDown( ) 中 的 做 法 是 分 别 为 4 个 鱼 对 象 做 碰撞 检测 ,一 旦 检 
测 到 与 任意 其 中 一 条 鱼 相 碰 ,那么 即 调用 这 条 人 鱼 的 getCaught( ) 并 传人 true 值 , 以 代表 该 
鱼 已 捕获 。 并 上 且 使 isClicked 赋值 为 true ,表示 鼠标 已 经 捕获 到 鱼 了 。 如 果 都 没有 捕获 到 
鱼 ,那么 caughtFish 保持 为 null ,变量 isClicked 也 为 false。 

其 实 onMouseDown( ) 函数 中 的 这 段 代码 不 够 简洁 ,原因 在 于 需要 通过 写 出 4 条 站 语 
句 来 判断 每 条 鱼 的 碰撞 检测 。 一 旦 鱼 的 数目 多 起 来 或 者 数目 未 知 的 时 候 , 这 段 代 码 就 运 
行 不 了 ,后 面 会 回来 修正 代码 。 

在 响应 函数 onMouseMove( ) 中 ,通过 变量 caughtFish 获取 被 捕获 的 鱼 对 象 ,并 且 调 用 
它 的 move( ) 方 法 来 移动 它 。 

在 响应 函数 onMouseUp( ) 中 ,调用 被 捕 鱼 的 方法 getCaught( ) 并 传人 false 表示 鱼 被 
释放 。 

运行 以 上 代码 ,可 以 看 到 有 四 条 不 同样 式 的 鱼 在 海底 中 畅游 ,与 上 一 章 的 鱼 游 动 效 
果 一 样 ,只 不 过 现在 可 以 用 鼠标 去 点 击 鱼 图 像 ,点 中 后 鱼 就 随 鼠 标 一 块 移动 , 放 开 鼠标 
后 , 鱼 儿 又 开始 游 动 起 来 。 如 图 12 -4 所 示 。 
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图 12 -4 游戏 效果 


12.3.2 效果 调整 


从 图 12 -4 效果 图 中 , 鱼 图 像 的 大 小 较 大 ,这 样 画 布 就 无 法 容纳 多 条 鱼 了 。 因 此 需 
要 为 鱼 儿 们 “瘦身 " , 即 利用 缩放 的 方法 把 鱼 的 体积 减 小 。 

所 以 需要 为 Fish 对 象 添加 一 个 表示 缩放 度 的 属性 scale, 并 且 在 绘制 图 像 前 ,将 面 布 
缩放 到 指定 的 大 小 ,那么 绘制 出 来 的 鱼 儿 就 会 变 小 了 。 因 此 在 构造 函数 中 为 Fish 添加 属 
性 并 初始 化 ,实现 例子 如 代码 清单 12 -7 所 示 。 

代码 清单 ”12 -7 


var Fish = function (image，x，y) { 
this. image = image; 
this.x = X; 
this.y = y; 
this. originX = x; 
this. originY = y; 
this. width = image. width; 
this. height = image. height / 4; 
this. scale = 0.5; 
this. isCaught = false; 
this. frm = 0; 
this. dis = 0; 


同时 需要 修改 绘制 方法 ,其 中 绘制 方法 draw( ) 修改 为 如 代码 清单 12 -8 所 示 。 


"238 . 


S] 到 Ep 
第 12 章 HTML5 休闲 游戏 这 计 下 入 


Fish. prototype. draw = function (ctx) { 
ctx. save( ); 
ctx. translate( this. x, this. y); 
ctx. scale( this. scale, this. scale); 
ctx. drawlmage!( this. image, 0, this. frm * this. height, this. width, this. height, 0, 0, this. 
width, this. height) ; 
ctx. restore( ); 
// 其 余 代码 不 变 


上 述 代 码 清 单 中 加 粗 的 一 行 是 新 增 的 代码 ,作用 是 把 画布 缩小 到 属性 scale 指定 的 
大 小 。 要 注意 的 是 ,上 下 文 对 象 中 的 所 有 绘图 方法 都 是 基于 画布 本 身 的 状态 来 绘图 , 虽 
然 在 drawImage( ) 方 法 中 的 绘制 大 小 不 变 , 但 是 画布 本 身 却 缩小 了 ,所 以 最 终 的 绘制 结果 
是 图 像 也 缩小 了 。 

还 有 一 点 需要 注意 的 是 :画布 平移 和 缩放 的 顺序 不 可 调换 。 即 要 先 平 移 , 后 缩放 ,如 
代码 清单 中 的 顺序 ,其 理由 如 下 :再 次 说 到 “上下文 对 象 中 的 所 有 绘图 方法 都 是 基于 画布 
本 身 的 状态 来 绘图 ”。 如 果 先 缩放 ,后 平移 ,虽然 此 时 的 平移 距离 对 画布 来 说 是 一 样 ,但 
画布 缩小 了 ,因此 实际 的 平移 效果 也 做 了 相应 的 缩小 。 

如 下 代码 所 示 。 

ctx. scale(0.5, 0.5); 

ctx. translate( 400, 0); 

此 时 先 缩小 到 原来 的 0.5 ,再 向 右 平移 400 个 单位 距离 。 但 是 平移 的 效果 实际 上 是 
400 x0.5 ,也 就 是 只 有 200。 因 此 不 能 调换 画布 转换 的 顺序 。 

除了 绘制 方法 draw( ) 需 要 修改 以 外 ,还 需 修改 方法 testPoint( ) ,因为 图 像 缩 小 也 意 
味 着 矩形 包围 框 的 长 宽度 也 缩小 了 ,为 此 修改 代码 如 代码 清单 12 -9 所 示 。 

代码 清单 ”12 -9 


Fish. prototype. testPoint = function (x, y) { 
var betweenX = (x > = this.x) && (x < = this.x + this. width * this. scale); 
var betweenY = (y > = this.y) && (y < = this.y + this. height * this. scale); 
return betweenX && betweenY; 
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那么 到 目前 为 止 修改 就 完成 了 ,其 余 的 代码 都 无 须 修改 ,代码 就 可 以 运行 成 功 。 效 
果 如 图 12 -5 所 示 。 


图 12 -5 修改 效果 图 


那么 现在 就 可 以 为 宽阔 的 海洋 添加 多 条 鱼 儿 了 。 但 是 这 时 候 问 题 又 出 现 了 , 即 上 一 
节 中 提 过 的 ,在 响应 函数 onMouseDown( ) 中 的 问题 , 那 就 是 让 判断 语句 太 多 。 只 有 4 条 
鱼 儿 的 时 候 , 或 许 重复 写 4 条 代码 相似 并 不 是 什么 困难 的 事情 ,但 是 一 旦 鱼 儿 数量 增多 
起 来 ,需要 重复 编写 的 代码 就 变 得 多 起 来 了 ,这 也 意味 着 一 旦 需要 修改 其 中 某 些 地 方 ,也 
需要 重复 修改 数 遍 ,而 且 这 样 的 代码 形式 不 方便 动态 添加 鱼 儿 。 所 以 需要 把 鱼 儿 放 在 一 
个 数组 中 ,利用 数组 去 遍历 所 有 鱼 儿 ,修改 的 代码 如 代码 清单 12 - 10 所 示 。 
代码 清单 ”12 -10 


var fishes = [], caughtFish = null; 

var isClicked = false; 

var mouseX, mouseY, preX, preY; 

var image = new Image(); 

var image2 = new Image(); 

var image3 = new Image(); 

var image4 = new Image(); 

var background = new Image(); 

background. src =“" 海 底 . png"; 

image. src =“" 鱼 动画 . png"; 

image2. src =" 鱼 动画 2. png"; 

image3. src =“" 鱼 动画 3. png"; 

image4. src =“" 鱼 动画 4. png"; 

image4. onload = function () { 
fishes. push( new Fish(image, —200, 220)); 
fishes. push( new Fish(image2, 20, 250)); 
fishes. push( new Fish(image3, 240, 200)); 
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fishes. push( new Fish(image4, 480, 180)); 
setInterval( function () { 
context. clearRect(0, 0, 800, 374); 
context. drawlmage( background, 0, 0); 
for (vari = 0; i < fishes. length; i+ +) { 
fishes[i]. draw( context) ; 
} 
}, 1000 / 60); 
}; 
function onMouseDown(e) { 
preX = mouseX = e.pageX - canvas. clientLeft; 


preY = mouseY = e.pageY - canvas. clientTop; 


for (vari = 0; i < fishes. length; i+ +) { 
if (fishes[i] .testPoint( mouseX, mouseY)) { 
fishes[i] . getCaught(true) ; 
caughtFish = fishes[i]; 
isClicked = true; 
return; 


其 中 需要 修改 的 代码 已 经 用 粗 体 表示 出 来 了 。 

不 用 单个 的 变量 来 保存 鱼 对 象 的 引用 ,而 是 利用 一 个 数组 来 保存 每 一 条 鱼 对 象 , 因 
此 先 定义 一 个 空 数组 fishes。 

接 下 来 ,利用 数组 对 象 方法 push( ) ,把 新 定义 的 鱼 对 象 放 进 数 组 中 , 即 把 元 素 压 进 到 
数组 中 。 

由 于 现在 鱼 对 象 都 在 数组 中 了 ,因此 利用 for 循环 语句 来 遍历 数组 中 的 所 有 元 素 ,并 
调用 draw( ) 方 法 来 绘图 。 其 中 每 一 个 数组 都 有 属性 length, 用 来 表示 数组 中 的 元 素 

在 响应 函数 onMouseDown( ) 中 ,同样 利用 了 for 循环 语句 来 遍历 数组 fishes 中 的 所 有 
鱼 对 象 ,逐一 对 它们 进行 碰撞 检测 ,一旦 捕获 到 鱼 儿 就 调用 该 鱼 对 象 的 getCaught( ) 方 法 
和 退出 响应 函数 。 如 果 遍 历 了 数组 中 的 所 有 元 素 后 都 没有 捕获 到 鱼 对 象 ,那么 自然 不 会 
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退出 函数 ,从 而 执行 剩 下 的 代码 , 即 
isClicked = false; 
caughtFish = null; 
表示 没有 捕获 到 鱼 。 
把 遍历 鱼 对 象 的 任务 交 给 数组 来 管理 ,就 不 需要 担心 数量 未 知 的 鱼 对 象 ,并 且 动态 
添加 鱼 儿 也 不 需要 修改 其 他 代码 。 下 面 再 添加 几 条 鱼 对 象 并 测试 代码 , 即 利用 数组 的 
push( ) 方 法 多 放 入 几 条 新 定义 的 鱼 对 象 , 效 果 如 图 12 -6 所 示 。 


12 -6 修改 效果 图 


12.3.3 收获 鱼 儿 


完成 了 拖 动 效果 后 , 接 下 来 就 要 设置 一 个 竹 篮 ,把 鱼 拖 动 到 竹 篮 的 位 置 松 开 后 ,就 能 
成 功 捕获 到 鱼 儿 了 。 

直接 用 面向 对 象 编程 的 方法 编写 竹 篮 对 象 , 竹 篮 对 象 有 属性 x 和 y 代表 绘制 位 置 ,有 
属性 width 和 height 代表 往复 的 大 小 。 还 有 属性 image 代表 竹 篮 的 图 像 。 

而 竹 篮 就 有 方法 testPoint( ) ,用 于 测试 鼠标 松 开 时 的 位 置 是 否 在 竹 篮 位 置 。getFish( ) 
方法 负责 把 放 到 人 竹 篮 的 鱼 对 象 从 数组 中 清除 掉 , 使 得 鱼 对 象 不 再 出 现在 海底 中 。draw( ) 方 
法 就 负责 绘制 竹 篮 。 下 面 是 竹 篮 对 象 Basket 的 实现 代码 ,如 代码 清单 12 -11 所 示 。 

代码 清单 ”12 -11 


var Basket = function (image) { 
this. image = image; 
this. x = 650; 
this.y = 50; 
this. width = 100; 
this. height = 70; 
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Basket. prototype. testPoint = function (x, y) { 
var betweenX = (x > = this.x) && (x < = this.x + this. width); 
var betweenY = (y > = this.y) && (y < = this.y + this. height); 
return betweenX && betweenY; 
}; 
Basket. prototype. getFish = function (fish) { 
fish. x = fish. originX = -200; 
fish.y = fish. originY = 150 + 80 * Math.random(); 
var index = fishes.indexOf(fish) ; 
fishes. splice( index, 1); 
}; 
Basket. prototype. draw = function (ctx) { 
ctx. drawlmage!( this. image, this. x, this. y, this. width, this. height); 
}; 


因为 竹 篮 放 在 了 固定 的 位 置 上 ,所 以 属性 x 和 y 在 构造 函数 中 就 先 给 定 了 一 个 值 。 
其 中 testPoint( ) 与 Fish 的 同名 方法 原理 一 致 ,draw( ) 方 法 负责 按照 给 定位 置 和 大 小 绘制 
竹 篮 。 
而 getFish( ) 中 ,把 收获 到 的 鱼 从 全 局 变量 fishes 中 去 除 掉 。 为 此 利用 数组 对 象 的 方 
法 indexOf( ) 来 查找 出 收获 到 的 鱼 对 象 在 数组 中 的 索引 index ,然后 利用 方法 splice( ) 删 
除 该 鱼 对 象 。 所 以 在 for( ) 循 环 语句 中 就 遍历 不 到 该 鱼 对 象 ,也 就 是 鱼 儿 从 海底 中 去 除 
了 。 再 给 出 其 余 添 加 的 代码 如 代码 清单 12 - 12 所 示 。 
代码 清单 ”12 -12 


var fishes = [], caughtFish = null; 

var basket; 

var isClicked = false; 

var mouseX, mouseY, preX, preY; 

var background = new Image(); 

var basketlmg = new Image(); 

var image = new Image(); 

basketlmg. src =“ 竹 篮 . png"; 

image. src =“" 鱼 动画 . png"; 

image4. onload = function () { 
fishes. push( new Fish(image, -200, 220)); 
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basket = new Basket(basketimg) ; 
setlnterval(function () { 
context. clearRect(0, 0, 800, 374); 
context. drawlmage( background, 0, 0); 
basket. draw( context) ; 
for (vari = 0; i < fishes. length; i++) { 


fishes[ i] . draw( context) ; 


} 
}, 1000 / 60); 
}; 
function onMouseDown(e) {...... } 
function onMouseMove(e) {...... } 


function onMouseUp(e) { 

isClicked = false; 

if (caughtFish ! = null) { 
caughtFish. getCaught( false) ; 
mouseX = e.pageX - canvas. clientLeft; 
mouseY = e.pageY - canvas. clientTop; 
if (basket. testPoint( mouseX, mouseY)) { 

basket. getFish( caughtFish) ; 

} 
caughtFish = null; 


以 上 代码 清单 中 相同 代码 段 用 省 略 号 表示 ,可 以 查阅 之 前 的 代码 清单 。 清 单 中 粗 体 
显示 的 代码 行为 新 添加 的 代码 。 

声明 一 个 全 局 变量 basket ,并 且 定 义 一 个 图 像 对 象 并 传人 到 类 Basket 的 构造 函数 中 ， 
这 样 basket 对 象 就 能 够 正常 显示 人 竹 篮 图 像 。 在 每 次 重 绘 范 数 中 也 不 要 忘 了 把 竹 篮 绘制 
出 来 。 

着 重修 改 的 是 响应 函数 onMouseUp( ) ,因为 目标 是 在 鼠标 松 开 时 才 判 断 鱼 精灵 是 否 
落 在 了 竹 篮 上 方 , 所 以 在 确定 捕获 到 鱼 精 灵 的 状态 下 ,通过 获取 鼠标 的 松 开 位 置 ,对 人 竹 篮 
进行 碰撞 检测 ,如 果 确 实在 竹 篮 上 方 松 开 鱼 精灵 ,那么 调用 basket 对 象 的 getFish( ) 方 法 
并 传人 被 捕获 的 鱼 对 象 。basket 对 象 的 方法 getFish( ) 自然 会 对 鱼 精 灵 作 出 处 理 。 

运行 上 述 代码 以 后 , 拖 动 鱼 精 灵 到 人 竹 篮 上 松 开 鼠 标 , 鱼 精灵 消失 在 画布 上 ,效果 如 

。244 . 


图 12 -7 所 示 。 


图 12 -7 收获 鱼 儿 


12.3.4 完善 游戏 


一 般 在 一 个 休闲 游戏 中 ,都 会 设置 一 个 分 数 显示 的 栏目 ,为 游戏 增添 一 些 趣味 。 下 
面 也 来 设置 一 个 分 数 显 示 。 设 置 方法 非常 简单 ,直接 给 出 修改 代码 如 代码 清单 12 - 13 
代码 清单 ”12 -13 


var Score = 0; 
context. font = "40px Arial"; 
setlnterval(function () { 
context. clearRect(0, 0, 800, 374); 
context. drawlmage( background, 0, 0); 
basket. draw( context) ; 
context. fillText(" 分 数 :" + score, 20, 50); 
for (vari = 0; i < fishes. length; i+ +) { 
fishes[ i] . draw( context) ; 
} 
}, 1000 / 60); 


先 定义 一 个 保存 分 数 的 全 局 变量 score 并 初始 化 为 0, 并 在 绘制 函数 中 把 分 数 绘制 到 
左上 角 的 固定 位 置 上 。 如 此 画布 左上 方 就 会 有 一 处 显示 分 数 。 

现在 再 修改 代码 ,使 得 抓 到 鱼 儿 以 后 就 添加 分 数 到 score 中 ,可 以 在 Basket 对 象 的 方 
法 getFish( ) 中 添加 这 个 行为 , 见 代码 清单 12 - 14 所 给 出 的 修改 代码 。 
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代码 清单 ”12 -14 


¥ 
= 名 吕 刁 


Basket. prototype. getFish = function (fish) { 
fish. x = fish. originX = -200; 
fish.y = fish. originY = 150 + 80 * Math. random(); 
var index = fishes. indexOf(fish); 
fishes. splice( index, 1); 


score + = 200; 


只 要 有 鱼 被 捕获 到 竹 篮 里 时 ,就 会 添加 分 数 到 全 局 变量 score 中 ,随后 绘制 出 来 的 分 
数 也 会 显示 出 来 ,效果 如 图 12 -8 所 示 。 


12 -8 分 数 显示 


只 是 添加 分 数 或 许 有 点 单调 ,不 妨 设置 一 些 难度 。 可 以 修改 每 条 鱼 的 缩放 度 大 小 ， 
设置 为 随机 的 缩放 大 小 ,那么 越 小 的 鱼 就 越 难 捕获 到 ,因此 相应 的 捕获 分 数 应 该 更 高 。 
而 在 计算 分 数 时 就 通过 缩放 度 来 决定 添加 的 分 数 。 修 改 代码 如 代码 清单 12 - 15 所 示 。 

代码 清单 ”12 -15 


var Fish = function (image, x, y) { 


Basket. prototype. getFish = function (fish) { 
fish. x = fish. originX = -200; 
fish.y = fish. originY = 150 + 80 * Math.random(); 
var index = fishes. indexOf(fish); 
fishes. splice( index, 1); 


DAG: 


score + = 200 * (1 - fish. scale) 10; 


在 Fish 对 象 的 构造 函数 中 ,为 scale 属性 初始 化 一 个 随机 大 小 的 数值 ,其 中 用 到 了 
Math 对 象 的 random( ) 方 法 取得 随机 数 。random( ) 方 法 返回 0 一 1 之 间 的 小 数 ,因此 缩 
放 度 大 小 的 范围 是 0.2 全 0.8 之 间 。 

在 添加 分 数 的 Basket 对 象 方法 getFish( ) 中 ,通过 获取 fish 对 象 的 缩放 属性 scale , 计 
算出 要 添加 的 分 数 大 小 。 其 中 后 面 的 按 位 或 运算 符 的 作用 是 去 掉 小 数 ,只 保留 整数 
部 分 。 

由 此 捕获 到 体型 较 大 的 鱼 精灵 时 ,获取 分 数 较 少 ,反之 ,体积 越 小 的 鱼 , 分 数 越 大 , 效 
果 如 图 12 -9 所 示 。 


12 -9 不 同体 型 的 鱼 儿 


当 所 有 的 鱼 儿 都 捕获 完 以 后 ,游戏 应 当 结束 了 ,所 以 在 最 后 再 添加 上 一 个 游戏 结束 
的 提示 文字 。 

仿照 上 一 章 中 缓 缓 落下 的 欢迎 文字 ,新 定义 一 个 ShowText 对 象 ,这 个 对 象 有 属性 x 
和 y 表示 绘制 位 置 ;有 属性 string 表示 要 绘制 的 文字 ;还 有 属性 beginY 表示 文字 落下 的 开 
始 位 置 。 

ShowText 只 有 一 个 方法 draw( ) ,负责 绘制 文本 ,给 出 ShowText 的 实现 如 代码 清单 12 
-16 所 示 。 

代码 清单 ”12 -16 


var ShowText = function (string, x, y) { 
this. string = string; 
this. beginY = y - 300; 
this.x = Xi; 
this.y = y; 
拓 
ShowText. prototype. draw = function (ctx) { 


context. save() ; 
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context. font = "50px Arial"; 


context. translate( this. x, this. beginY) ; 
context. fillText( this. string, 0, 0); 
context. restore( ); 
if (this. beginY < = this.y) { 

this. beginY + = 2; 


}; 


现在 修改 重 绘 函数 中 的 代码 ,需要 通过 判断 目前 海底 中 剩 下 的 鱼 精灵 数目 ,这 个 数 
值 可 以 通过 数组 对 象 的 属性 length 获取 。 当 数目 小 于 等 于 0 时 ,表示 所 有 鱼 儿 都 被 捕获 
了 。 那 么 这 时 候 开 始 落下 游戏 结束 的 提示 语 ,给 出 修改 代码 如 代码 清单 12 -17 所 示 。 

代码 清单 ”12 -17 


var text = new ShowText( "游戏 结束 !"，300，200) ; 
setlnterval(function () { 
context. clearRect(0, 0, 800, 374); 
context. drawlmage( background, 0, 0); 
basket. draw( context) ; 
context. fillText( "分数:" + score, 20，50); 
for (vari = 0; i < fishes. length; i+ +) { 
fishes[ i] . draw( context) ; 
} 
if (fishes. length < = 0) { 
text. draw( context) ; 
} 
}, 1000 / 60); 


效果 如 图 12 - 10 所 示 。 


图 12 -10 游戏 结束 提示 语 
*。 248 . 


人 TMS 休闲 滨 戏 J 


12.4 小 结 


在 这 一 章 中 ,主要 介绍 了 一 个 完整 的 休闲 小 游戏 的 设计 开发 过 程 。 游 戏 开发 过 程 中 
依次 添加 的 功能 是 拖 动 游 动 的 鱼 .缩小 鱼 的 布局 .捕获 被 抓 住 的 鱼 和 分 数 显 示 。 游 戏 中 
所 出 现 的 功能 并 不 是 一 开始 就 全 部 设计 出 来 , 而 是 针对 每 个 功能 ,修改 游戏 代码 而 添加 
的 。 更 进一步 ,这 种 游戏 的 设计 方式 可 以 看 作 是 游戏 的 原型 设计 , 即 先 简单 实现 一 个 游 
戏 的 基本 框架 ,而 后 逐渐 添加 新 功能 ,最 后 构建 出 一 个 功能 庞大 而 复杂 的 游戏 。 


12.5 习题 


1. 修改 本 章 的 游戏 程序 ,增加 一 个 关卡 ,使 篮子 在 水 平方 向 以 一 定 的 速度 做 反复 的 
运动 ,同时 保证 可 以 正常 收获 鱼 儿 。 

2. 为 本 章 的 游戏 程序 增加 计时 板 , 使 得 游戏 将 在 固定 的 时 间 内 结束 ,不 论 水 中 是 否 
还 有 鱼 游 动 。 

3. 根据 自己 的 想法 策划 一 个 休闲 小 游戏 ,并 使 用 已 经 学 过 的 知识 来 实现 。 
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